一文快速上手-Vue CLI脚手架

安装Vue CLI

(1) 全局安装Vue CLI

方式一（推荐方式）：在终端安装指定版本

npm i @vue/[email protected] -g

注：目前5.0.8应该是最新的版本了。

方式二：在终端通过命令安装最新版本

npm i @vue/cli -g

(2) 升级Vue CLI到最新版本（可选）

npm update @vue/cli -g

(3) 使用vue命令创建项目

vue create 项目的名称

(4) 安装完 Vue CLI之后，可以在终端查看其版本号

vue --version

结果：

@vue/cli 5.0.8

Vue CLI新建项目

在VS Code工具中提前安装Volar插件，为vue3版本的.vue文件提供语法高亮等支持。

第一步：使用Vue CLI的vue命令新建一个名为01_vuecli_demo的Vue3版本项目。

输入命令：

vue create 01_vuecli_demo

出现如下Vue CLI脚手架默认提供的三个预设。

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

• (1) Default ([Vue 3] babel, eslint)：新建vue3默认项目，项目集成babel,eslint插件
• (2) Default ([Vue 2] babel, eslint)：新建vue2默认项目，项目集成babel,eslint插件
• (3) Manually select features：新建项目，手动选择项目所需的功能，如是否需要babel和eslint插件

第二步:手动选择所需的功能。

根据需要选择相应的功能。

提示：“选中”和“取消选中”是按空格键，“上下移动”是按上下键，“确认”是按Enter键。

>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

说明：

• babel：是否使用Babel作为JavaScript编译器，结合插件将ES6/7/8/9/10等语法转换为ES5语法。
• TypeScript：是否使用TypeScript。
• Progressive Web App (PWA) Support：是否支持PWA。PWA是渐进式web应用-一种无需要安装的网页应用，具有与原生应用相同的用户体验优势。
• Router：是否默认集成路由。
• Vuex：是否默认集成Vuex状态管理。Vuex用于在多个组件间共享数据。
• CSS Pre-processors：是否选用CSS预处理器，即常用的Less、Scss、Stylus预处理器。
• Linter / Formatter：是否选择Eslint对代码进行格式化限制。
• Unit Testing：是否添加单元测试。
• E2E Testing：是否添加E2E测试。

第三步：选择Vue.js版本。

根据需要选择vue版本，这儿示例选择vue3.x版本。

 3.x
 2.x

第四步：选择配置存放的位置。

 In dedicated config files
 In package.json

这儿选择“In dedicated config files”,意思就是将babel、eslint等配置信息统一放到各自独立的配置文件中，而不是放到package.json文件中。

第五步：是否保存为自定义预设。

Save this as a preset for future projects? (y/N)

输入y，表示保存自定义预设，也可以输入n,即不保存自定义预设。

如果保存了预设，在下次新建项目时，在第一步选择预设时，就可以看到我们保存过的预设，比如我们把前面的预设命名为“vue3-demo”，最后按"Enter"键即可。

第六步：新建成功的提示。

 $ cd 01_vuecli_demo
 $ npm run serve

vue.js 3 项目目录结构

01_vuecli_demo/  项目名称
|-- node_modules         #存放第三方依赖包（例如，执行npm i安装的依赖包）
|-- public/              #静态资源目录  
|   |-- favicon.ico      #网站图标  
|   |-- index.html       #项目的入口文件  
|-- src/                 #项目的源代码目录  
|   |-- assets/          #静态资源目录，如图片、字体等  
|   |-- components/      #可复用的 Vue 组件  
|   |-- router/          #Vue Router 的路由配置  
|   |   |-- index.js     #路由的主文件  
|   |-- store/           #Vuex 的状态管理  
|   |   |-- index.js     #状态管理的主文件  
|   |-- views/           #页面目录  
|   |   |-- About.vue    #关于页面  
|   |   |-- Home.vue     #首页  
|   |-- App.vue          #根组件  
|   |-- main.js          #项目的入口文件  
|-- .browserslistrc      #Browserslist 配置，用于 Autoprefixer 和其他工具确定目标浏览器和 Node.js 版本范围  
|-- .eslintignore        #ESLint 忽略的文件  
|-- .eslintrc.js         #ESLint 配置  
|-- .gitignore           #Git 忽略的文件  
|-- babel.config.js      #Babel 插件的配置文件 
|-- package-lock.json    #npm 依赖的锁定文件  
|-- package.json         #项目的元数据文件和 npm 脚本  
|-- README.md            #项目的说明文件 
|-- vue.config.js        #Vue CLI 配置文件，比如配置alias、devServer和configure Webpack等

项目的运行和打包

"serve": "vue-cli-service serve",
"build": "vue-cli-service build"

vue.config.js文件解析

• 1.outputDir：用于指定打包输出的文件名，默认是dist目录。如果想修改目录名称，可以使用outputDir配置。

module.exports = {
  outputDir: 'build'
}

对于使用 Vue CLI 5.x创建的项目，vue.config.js同样支持使用defineConfig宏函数，以获得更好的代码智能提示，示例代码如下：

// defineConfig 宏函数只支持 Vue CLI 5.x 
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true, // 如果选择true,那么项目引用node_modules中的包也会用Babel来编译,否则不会编译
  outputDir: 'build'
})

• 2.assetsDir：用于指定静态资源存放目录。该属性是相对于outputDir路径。

module.exports = {
  outputDir: 'build',
  assetsDir: 'static'
}

编译后，index.html资源引用情况如下：

<script defer="defer" src="/static/js/chunk-vendors.abc53625.js"></script>
<script defer="defer" src="/static/js/app.0af7aca5.js"></script>
<link href="/static/css/app.bf008658.css" rel="stylesheet">

• 3.publicPath：用于指定引用资源的前缀。

// defineConfig 宏函数只支持 Vue CLI 5.x 
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true, // 如果选择true,那么项目引用node_modules中的包也会用Babel来编译,否则不会编译
  outputDir: 'build',
  assetsDir: 'static',
  publicPath: './'
})

当进行上述相对路径配置后，在index.html代码如下：

<script defer="defer" src="static/js/chunk-vendors.abc53625.js"></script>
<script defer="defer" src="static/js/app.0af7aca5.js"></script>
<link href="static/css/app.bf008658.css" rel="stylesheet">

• 4.alias：用于配置导包路径的别名。
  例如，当项目的目录结构比较深的时候，配置一个路径别名提高了代码的可读性和维护性。

const path = require('path');
function resolve (dir) {
  return path.join(__dirname, dir);
}


// defineConfig 宏函数只支持 Vue CLI 5.x 
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true, // 如果选择true,那么项目引用node_modules中的包也会用Babel来编译,否则不会编译
  outputDir: 'build',
  assetsDir: 'static',
  publicPath: './',
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('components', resolve('src/components'))
  }
})

在vuejs 3项目中，可以在vue.config.js文件中的chainWebpack属性上配置alias。chainWebpack 是一个函数，该函数会接收一个基于webpack-chain的config实例，允许对webpack配置进行更细粒度的修改。

上述配置完成后，例如HelloWorld组件的引入方式可以调整为如下两种方式：

import HelloWorld from 'components/HelloWorld.vue'
import HelloWorld from '@/components/HelloWorld.vue'

• 5.devServer: 开发环境的服务配置

所有webpack-dev-server的选项都支持。注意：

• 有些值像 host、port 和 https 可能会被命令行参数覆写。
• 有些值像 publicPath 和 historyApiFallback 不应该被修改，因为它们需要和开发服务器的 publicPath 同步以保障正常的工作。

示例：

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    host: "localhost",
    port: 8083,
    open: true,
    proxy: {},
  },
});