VueCLI3的创建和起步
一、创建CLI3项目
vue create 项目名
每个选项的含义如上图
为什么CLI3比CLI2的文件结构和配置更简单:
这个组件帮助我们管理了很多包的版本
1.1 文件夹结构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QVkp10VE-1592450741681)(C:\Users\93221\AppData\Roaming\Typora\typora-user-images\image-20200618010128782.png)]
二、 运行CLI3
package.json文件中配置了运行方式
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
所以运行的命令是npm run serve
本地查看再浏览器中输入http://localhost:8080/
可以看到结果
2.1 main.js
默认代码
import Vue from 'vue'
import App from './App.vue'
//提示信息,构建时会有提示,开发时不会用
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
这里的$mount('#app')
就等于原来的el:'#app'
,其实在vue的源码中用el属性挂在也是在执行mount函数,这个挂载最终都会被替换成render,所以这两个写的方式是一样的
2.2CLI的配置
方法一:
启动vue ui
在命令框中执行vue ui
命令,这会打开一个本地服务,帮助管理vue项目中的配置、导入项目,通过图形化界面管理vue依赖
方法二
方法三:
创建一个vue.config.js
文件,里面可以导出自己想要的配置
然后再git中先git add .
,然后git status
,最后git commit -m
就可以修改配置文件