16. 使用vue3结构及配置管理

主要内容:

1. vue-cli2和3的区别
2. 创建vue-cli3脚手架
3. vue-cli3项目的目录结构
4. vue-cli2和vue-cli3中 main.js文件的区别
5. vue-cli3的配置文件管理

---

一. vue-cli2和vue-cli3的区别

• vue-cli3 是基于webpack4的, vue-cli2是基于webpack3
• vue-cli3的设计原则是"0配置", 移除了配置文件根目录下build和config等目录
• vue-cli3 提供了vue ui命令, 进行可视化配置, 操作更方便
• 替换了static文件夹为public文件夹, 并且index.html移动到public文件夹中

二. 创建vue-cli3脚手架

之前创建了vue-cli2的脚手架, 这次来创建vue-cli3的.

创建项目的命令:

vue create 项目名称

1. please pick a preset: 请选择一个配置

三选一, 我们来看看这个配置的含义:

1. defalut (babel, eslint)
   
   默认配置, 默认配置安装了es6转es5,eslint代码格式化工具

1. Manually select feature: 手动选择特性
   
   通常, 如果我们需要指定哪些插件安装,哪些不安装, 就可以选择手动

• 按空格键, 选中/取消选中
• 按上下箭头, 上下选择
• 取消Linter, 我们不使用格式啊校验.

某些配置是单独放在在一个配置文案

2. Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys): 配置文件放在那里呢?

• In dedicated config files:独立文件
• In package.json : 放到package.json中
  
  通常我们都选择独立的配置文件, 方便管理

3. Save this as a preset for future projects? (y/N) 是否将刚刚的配置保存到项目中?

如果选择是: 下次在配置选项的时候, 除了default,manually,还会多一个我们保存的项目配置.

• Y: 如果以后搭建项目都希望是这个配置就选择y
• N: 不希望保存配置
  
  下次在创建项目的时候, 我们就可以自动选择之前保存的项目特征
  
  

如果我们设置了很多自定义配置,如何取消呢?

在/Users/用户名/.vuerc, 修改这个文件

{
  "useTaobaoRegistry": false,
  "presets": {
    "mySet": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {}
      },
      "vueVersion": "2"
    }
  }
}

里面有个选项是presets. 下面就是我们保存的设置.设置名称是mySet.这个配置只安装一个插件:@vue/cli-plugin-babel

4. Save preset as: 保存上面的配置的文件名是什么?

三. vue-cli3项目的目录结构

下面来对比看一下vue-cli2 和vue-cli3的项目结构的区别



可以看到vue-cli3的项目结构简洁了很多

• build和config配置文件都没有了
• static换成了public文件夹.

下面我们来看一下vue-cli3项目中各个文件的含义

1. node_modules: npm构建的组件都在这个文件夹里面

2. public: 里面存放公共资源. 目前有index.html和

3. src: 存放源代码

4. .browserslitstrc: 浏览器适配配置

> 1%
last 2 versions
not dead

适配市场份额大于1%的最后两个版本, 不适配已经过期的版本

5. gitignore: 忽略文件

node_modules
/dist

重点看这个, 忽略node_modules文件和/dist构建后的文件. 通过运行npm run serve就可以生成这两个文件了

6. babel.config.js: babel插件设置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

通常, 不修改这个文件的内容

7. package.json: npm配置文件

{
  "name": "03-vuecli3",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "vue-template-compiler": "^2.6.11"
  }
}

这个比vue-cli2的devDependencies配置文件少了很多. 而多了一个下面这个配置:

"@vue/cli-service": "~4.5.0",

这个配置的作用是: 管理dev环境的依赖. vue-cli3使用这个配置以后, 简化了配置文件.

8. package-lock.json: 真实使用的插件的版本号.

在package.json配置文件中, 我们会使用~或者^来模糊匹配版本号, 而这个文件里就是精确指明使用的详细版本号了

四.vue-cli2和vue-cli3中 main.js文件的区别

来看下面的图片, 对比二者的区别:

Vue.config.productionTip = false

这句话的意思是: 是否打印项目启动的详细提示信息. false: 不打印. true: 打印

不同的地方在这里

vue-cli2

new Vue({
  el: '#app',
  render: h => h(App)
})

vue-cli3

new Vue({
  render: h => h(App),
}).$mount('#app')

其实这两种写法是一个意思. el:'#app',vue在解析的时候, 会去执行$mount("#app").

五. vue-cli3的配置文件管理

vue-cli3为了项目结构简单， 去掉了config和build文件夹。 但是这些文件夹实际上都是需要的。 加入我们想要修改配置文件， 要如何修改呢？有三种方法：

方法一：使用vue UI配置界面修改

首先， 我们安装vue UI界面管理。 这是一个全局的命令

vue ui

安装好以后， 如下所示：

然后打开界面

在这我们可以导入项目, 创建项目.

我们导入刚刚创建的vuecli3项目, 导入成功后看到如下界面:

页面左侧有菜单, 分别看:

a.插件

在这里可以看到我们安装的全部插件, 还可以点击添加插件按钮,安装新插件. 这些插件可以在package.json配置文件中找到

{
  "name": "03-vuecli3",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "vue-template-compiler": "^2.6.11"
    }
}

在devDependencies选项中有三个插件, 而我们的vue ui中只有两个, 另一个在<依赖>里面,一会就可以看到了.

b.依赖

可以看到目前这个项目依赖core-js和vue. 其中vue的版本是2.6.12
同时依赖了vue-template-compiler, 版本也是2.6.12, 通常vue和vue-template-compiler的版本是一样的. 如果不一样, 可能编译会报错.

c.配置

这里面就有我们之前在webpack.config.js中定义的输入路径,输出路径, 公共路径等. 如果需要修改, 可以直接修改这里

d.任务

我们之前启动服务都是使用命令, vue3也可以在ui界面进行启动

点击运行按钮, 即可启动.并且可以监控启动状态等.

方法二：在node_module模块中查看配置

虽然vue-cli3简化了配置, 但是这些配置还是得有, 只是对用户来说, 隐藏了. 那么这个配置隐藏在哪里了呢?在node_module中@vue目录下.

在@vue目录下, 找到cli-service目录, 现在vue的配置都交给了cli-service来管理. 在cli-service目录下, 有一个webpack.config.js.这个就是webpack的配置.

// this file is for cases where we need to access the
// webpack config as a file when using CLI commands.

let service = process.VUE_CLI_SERVICE

if (!service || process.env.VUE_CLI_API_MODE) {
  const Service = require('./lib/Service')
  service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
  service.init(process.env.VUE_CLI_MODE || process.env.NODE_ENV)
}

module.exports = service.resolveWebpackConfig()

我们看到它引入了lib目录下的Service.js配置文件, 这里面有引入了很多包.

这里就有base基础配置, dev开发环境配置,prod生成环境配置等.

方法三： 自定义需要修改的配置文件

如果我们想要修改默认配置, 需要在根目录下新建一个文件vue.config.js. 这个文件名是固定的, 不可修改.

然后将自定义的内容写到module.exports里面

module.exports= {

}