VueCLI：起步

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就可以修改配置文件