vue学习记录之vue-cli

vue-cli是Vue官方提供的开发脚手架，能快速创建一个开发的demo，并且部分配置也已经配置好了可以直接进行项目开发。

安装vue-cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli

更新vue-cli

npm update -g @vue/cli
# OR
yarn global upgrade --latest @vue/cli

创建项目

vue create <projectName>

选择模版

它会提示你选择一个预设项，下面的第一个是我曾创建时保存的一个模板，默认是让选择vue2、vue3、自定义

Vue CLI v4.5.11
┌───────────────────────────────────────────┐
│                                           │
│   New version available 4.5.11 → 4.5.13   │
│     Run npm i -g @vue/cli to update!      │
│                                           │
└───────────────────────────────────────────┘

vue3-template ([Vue 3] dart-sass, babel, router, vuex, eslint) 
Default ([Vue 2] babel, eslint) 
Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
Manually select features 

选择自定义模块

选择自定义后会提示你选择需要的模块

Vue CLI v4.5.11
┌───────────────────────────────────────────┐
│                                           │
│   New version available 4.5.11 → 4.5.13   │
│     Run npm i -g @vue/cli to update!      │
│                                           │
└───────────────────────────────────────────┘

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Choose Vue version //选择vue版本
 ◉ Babel // 处理es6兼容性插件
 ◯ TypeScript //使用ts创建项目
❯◯ Progressive Web App (PWA) Support // 用vue开发APP应用
 ◯ Router //vue的路由
 ◯ Vuex // vue状态管理
 ◯ CSS Pre-processors // less、sass处理
 ◉ Linter / Formatter // 检查语法的插件
 ◯ Unit Testing //单元测试
 ◯ E2E Testing //端对端测试

在操作提示的最后你可以选择将已选项保存为一个将来可复用的preset，会被保存到用户目录下名为.vuerc的JSON文件，可通过修改该文件删除已保存的设置。

图形化UI创建

vue ui

运行此命令就会打开一个网页，可在此网页中选择进行配置。

使用cli安装插件

# 使用短名称安装插件
vue add eslint
vue add apollo
# 使用完整名称安装插件
vue add @foo/bar
# 可以向被安装的插件传递生成器选项 (这样做会跳过命令提示)
vue add eslint --config airbnb --lintOn save

...

vue配置

之前的css、webpack等配置都是webpack.config.js中进行配置，有时候还需要引入node中的库，而vue.config.js对此进行了一次封装，让我们可以只关注配置本身，不需要考虑其他的。

这个文件应该导出一个包含了选项的对象：

module.exports = {
  // 选项...
}

可配置的选项比较多，这里就简单的挑几个做个示例，其他的可在👉选项查看。

vue.config.js

module.exports = {
  outputDir: 'dist',
  configureWebpack: {
    plugins: [
      new BannerPlugin({
	banner: 'bennett-hibennett.cn'
      })
    ]
  }
};

参考的官方文档

Vue CLI：https://cli.vuejs.org/zh/guide
配置参考：https://cli.vuejs.org/zh/config/#vue-config-js