搭建vue-cli
VUE-CLI 脚手架
1.什么是vue-cli
vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。
vue-cli是有Vue提供的一个官方cli,专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板,是为现代前端工作流提供了 batteries-included
![](https://upload-images.jianshu.io/upload_images/14033715-94c17914b0024c54.png?imageMogr2/auto-orient/strip|imageView2/2/w/650/format/webp)
image.png
的构建设置。只需要几分钟的时间就可以运行起来并带有热重载,保存时 lint 校验,以及生产环境可用的构建版本。
2.安装
npm install -g @vue/cli
![](https://upload-images.jianshu.io/upload_images/14033715-96a75f0eed134bf9.png?imageMogr2/auto-orient/strip|imageView2/2/w/649/format/webp)
image.png
3.创建项目
vue create hello-world
![](https://upload-images.jianshu.io/upload_images/14033715-e32cf0e61443a07c.png?imageMogr2/auto-orient/strip|imageView2/2/w/650/format/webp)
image.png
vue ui
![](https://upload-images.jianshu.io/upload_images/14033715-a9097b97d0bb5dc8.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
image.png
4.启动项目
npm run serve
npm run build
5.自定义脚手架
用户文件夹.vuerc
如何删除自定义脚手架
![](https://upload-images.jianshu.io/upload_images/14033715-8c97c3bee8cc3e28.png?imageMogr2/auto-orient/strip|imageView2/2/w/650/format/webp)
image.png
6.添加插件的方式
vue add vuetify
7.全局环境变量
.env文件与.env.development文件
VUE_APP_XX=。。。。
<template>
<div>
{{ base }}
</div>
</template>
<script>
export default {
data(){
return{
base:process.env.VUE_APP_BASE
}
},
name:'Nav',
components: {
},
props:[]
}
</script>
<style lang="less">
</style>
// App.vue
<template>
<v-app>
<Nav/>
</v-app>
</template>
<script>
import HelloWorld from './components/HelloWorld'
import Nav from './components/Nav'
export default {
name: 'App',
components: {
HelloWorld,Nav
},
data () {
return {
//
}
}
}
</script>
8.独立运行的VUE
vue serve name.vue
需要全局安装运行环境
npm i @vue/cli-server-global -g
9.图形构建项目
10.配置vue.config.js
module.exports=
{
baseUrl: //根路径
outputDir: //输出路径
assetsDir: //静态资源
lintOnServer:false //是否开启eslint
devSer:
{
open
host
port
https
hotOnly
proxy:{
//跨域
‘/api’:{
target:”http://api.localhost:80/api”
ws:true,
changeOrigin:true,
pathRewrite:{
‘^/api’: ‘’
}
}
}
}
}
11.获取数据
before(app){
app.get(‘/api/goods’,(req,rep)=>{
rep.json(data);
})
}
12.文件配置
![](https://upload-images.jianshu.io/upload_images/14033715-51de19588254db82.png?imageMogr2/auto-orient/strip|imageView2/2/w/441/format/webp)
总结下来其实只有四步
npm install --global vue-cli 下载vue-cli脚手架
vue init webpack test 生成项目,形成基本结构
npm install 依赖包