vue/cli 3.0脚手架搭建

Dear 丶 2022-05-17 10:27 199阅读 0赞

在vue 2.9.6中，搭建vue-cli脚手架的流程是这样的：  
首先 全局安装vue-cli，在cmd中输入命令:

`npm install --global vue-cli`

安装成功：  
![这里写图片描述][70]

安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。  
![这里写图片描述][70 1]

然后就可以构建项目了，依次输入命令：

1.  `vue init webpack “名称”`
2.  `cd 名称（进入到创建的项目中）`
3.  `npm install (安装项目的依赖)`
4.  `npm run dev (启动项目)`

然后在浏览器中输入localhost:8080就可以启动我们创建的项目啦

此时，我们在 `package.json`可以看到的版本信息：  
![这里写图片描述][70 2]

构建好的项目目录是这样的：  
![这里写图片描述][70 3]

## Vue CLI 3.0搭建 ##

如今，官方文档已经升级3.0，在 vue-cli 3.0中，我们需要重新配置：

如果你已经安装了vue 2.9.6 的话，则需要先将其删除：指令为：`npm uninstall -g vue-cli`  
![这里写图片描述][70 4]

提示：Vue CLI要求Node.js版本8或者更高（8.10.0+ 推荐）。  
![这里写图片描述][70 5]

第二步：更新Vue-cli 指令：`npm install -g @vue/cli` 或 `cnpm install -g @vue/cli` 或 `yarn global add @vue/cli`  
（这里我用的 `cnpm` 安装的，国内的淘宝镜像速度会快许多…），安装成功则显示：  
![这里写图片描述][70 6]

安装之后，记得查看版本号：查看版本（是否安装成功）：`vue -V` (大写的V)  
![这里写图片描述][70 7]

接下来就可以构建项目了，输入指令：`vue create test` （test为项目名）；

**与 2.0 不同的是这里不再是选择模板，而是预设 presets**   
![这里写图片描述][70 8]

### 默认配置 ###

*  选择 \[默认\] 将直接开始安装  
    ![这里写图片描述][70 9]

### 自定义配置 ###

*  选择 \[自定义\]  
    方向键上下移动，空格选中，Enter确定，自定义配置中，您将会看到这些配置项：  
    ![这里写图片描述][70 10]  
    ![这里写图片描述][70 11]

### 自定义细节配置 ###

1.  是否使用class风格的组件语法  
    ![这里写图片描述][70 12]
2.  是否使用babel做转义  
    ![这里写图片描述][70 13]
3.  选择CSS预处理类型  
    ![这里写图片描述][70 14]
4.  选择语法检测规范  
    ![这里写图片描述][70 15]
5.  选择 保存时检查 / 提交时检查  
    ![这里写图片描述][70 16]
6.  选择配置信息存放位置，单独存放或者并入package.json  
    ![这里写图片描述][70 17]
7.  是否保存当前预设，下次构建无需再次配置  
    ![这里写图片描述][70 18]

完成安装  
![这里写图片描述][70 19]

3.0 的基本目录结构相对 2.0 精简了不少 （应该说是最精简的目录了～）  
![这里写图片描述][70 20]

public相当于原来的static，里面的index.html是项目的入口  
src同以前一样

cli3.0没有build和config了，  
想要配置的话，需要在项目根目录下创建vue.config.js文件  
(反正官方文档这么说~)

**再看一下 src 里面的目录结构：**  
![这里写图片描述][70 21]

### 配置文件去哪了？ ###

之前的build和config文件夹不见了，那么应该如何配置 如webpack等的配那？  
只需要在项目的根目录下新建 vue.config.js 文件（是根目录，不是src目录）

语法

module.exports = {
     // 基本路径
     baseUrl: '/',
     // 输出文件目录
     outputDir: 'dist',
     // eslint-loader 是否在保存的时候检查
     lintOnSave: true,
     // use the full build with in-browser compiler?
     // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
     compiler: false,
     // webpack配置
     // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
     chainWebpack: () => {},
     configureWebpack: () => {},
     // vue-loader 配置项
     // https://vue-loader.vuejs.org/en/options.html
     vueLoader: {},
     // 生产环境是否生成 sourceMap 文件
     productionSourceMap: true,
     // css相关配置
     css: {
     // 是否使用css分离插件 ExtractTextPlugin
      extract: true,
     // 开启 CSS source maps?
      sourceMap: false,
     // css预设器配置项
      loaderOptions: {},
     // 启用 CSS modules for all css / pre-processor files.
      modules: false
     },
     // use thread-loader for babel & TS in production build
     // enabled by default if the machine has more than 1 cores
     parallel: require('os').cpus().length > 1,
     // 是否启用dll
     // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
     dll: false,
     // PWA 插件相关配置
     // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
     pwa: {},
     // webpack-dev-server 相关配置
     devServer: {
      open: process.platform === 'darwin',
      host: '0.0.0.0',
      port: 8080,
      https: false,
      hotOnly: false,
      proxy: null, // 设置代理
      before: app => {}
     },
     // 第三方插件配置
     pluginOptions: {
     // ...
     }
    }

例如：  
![这里写图片描述][70 22]

在`package.json`中自行查看配置的详细信息，  
![这里写图片描述][70 23]

然后输入指令运行项目即可：  
`npm run serve` ——运行指令  
`npm run lint` ——语法检测&自行修复

成功跑起来之后是这样的：  
![这里写图片描述][70 24]

[70]: /images/20220517/2422dd76271646be8a1649a35f2e6362.png
[70 1]: /images/20220517/dc788b7677eb42dbbc982052ea9924a3.png
[70 2]: /images/20220517/46abd63349db4b74a1d0cf8016719c6d.png
[70 3]: /images/20220517/a14bd991dbc64cf1acc7b75953be2af4.png
[70 4]: /images/20220517/afb5353012b6483ea039221dd56efaf4.png
[70 5]: /images/20220517/c7618390255d4af29aa9960487870a34.png
[70 6]: /images/20220517/6fb79609b5734331b459fb5179f6fa1d.png
[70 7]: /images/20220517/7655edb8812d460795a61ef9d0447282.png
[70 8]: /images/20220517/c01f1049ec9b46a981b6866b7649936a.png
[70 9]: /images/20220517/9d7223b23e124aad8265b57fc3a46971.png
[70 10]: /images/20220517/743cec9170d147a8addc5408a9acbfdd.png
[70 11]: /images/20220517/28f8ba690373413da30eac3f91e1c9fb.png
[70 12]: /images/20220517/60ee7d5389144479a4b32048bd7973cc.png
[70 13]: /images/20220517/4a4ca748df294b48bdff40dca5596588.png
[70 14]: /images/20220517/857fa097f4fd41b69133a51720bfb7df.png
[70 15]: /images/20220517/44cee376aac6491b9bb178f7843a8b37.png
[70 16]: /images/20220517/0c9cc8ad79c6483e8607c33832f31c49.png
[70 17]: /images/20220517/cb74d41f183b44a2b0e4b544048de1b2.png
[70 18]: /images/20220517/86f846f0a05746edb911a3852ccc7ee7.png
[70 19]: /images/20220517/fa13f3abeb424654b1fc1c7432863c77.png
[70 20]: /images/20220517/e8cc278b294a4ff5bf51de8595b5b991.png
[70 21]: /images/20220517/54205c06d34e4cfbb033ad9fe84dfc6d.png
[70 22]: /images/20220517/b24a9699639f4ac89003fd00b053eec3.png
[70 23]: /images/20220517/57272ff3baa54a1a8f596cf3e0806d66.png
[70 24]: /images/20220517/9c3dc1d33c65467c9b75c81b26118d3d.png