vue-cli快速搭建Vue脚手架 （vue-cli 3.x 模板）

 

一、确保已经安装了npm 或者 yarn

　　查看是否安装了npm或yarn：在控制台输入npm -v 或 yarn -v 能看到版本号就表明已经安装

　　（注意：Vue CLI 须要 Node.js 8.9 或更高版本 (推荐 8.11.0+)）

二、全局安装vue脚手架工具 vue-cli

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

三、输入一下命令建立一个项目：

vue create <project-name>

输入命令后会询问选取一个 preset：

默认的包含了基本的 Babel + ESLint 设置的 preset，这里选择了默认的，但通常生产中不选择默认的。

 

更改一些其它设置以后，便会开始安装须要的依赖包

四、进入到 <project-name> 目录下，运行

>cd <project-name>

>yarn serve
或 >npm run serve

运行成功，便可在浏览器中输入 http://localhost:8080/ 查看

五、vue项目目录说明：

├ ── node_module/ #项目中安装的依赖模块 ├ ── public/ #index.html 入口模板文件和favicon.icon ├ ── src/ │ ├── main.js # 程序入口文件 │ ├── App.vue # 程序入口vue组件 │ ├── components/ # 组件 │ │ └── ... │ └── assets/ # 资源文件夹，通常放一些静态资源文件 │ └── ... ├── .babel.config.js # babel 配置文件 ├── .gitignore # 用来过滤一些版本控制的文件，好比node_modules文件夹 └── package.json # 项目文件，记载着一些命令和依赖还有简要的项目描述信息 └── README.md #介绍本身这个项目的，可参照github上star多的项目。

 六、CLI图形化界面搭建脚手架

//输入如下命令，会在浏览器中运行一个图形化的 脚手架 搭建向导，按照向导来即可快速简单的搭建须要的脚手架
vue ui

如图：

七、使用 vue.config.js 添加自定义配置

使用vue-cli 3.X 搭建的项目与vue-cli 2.x 搭建的项目相比，一些配置被隐藏了起来（实际上是添加到了node_modules中），若是想添加一些本身的配置，须要在项目的根目录下新建一个 veu.config.js 文件，而后按照vue-cli 3.x 给出的配置参考添加本身的配置便可(详情参见https://cli.vuejs.org/zh/config/ ）

这里贴出我本身添加的一些简单配置:

//#region 定义chainWebpack中别名所需的resolve()
const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } //#endregion

//vue.config.js
module.exports = { // 若是你不须要生产环境的 source map，能够将其设置为 false 以加速生产环境构建。
    productionSourceMap: false, // webpack 配置，键值对象时会合并配置，为方法时会改写配置
    configureWebpack: (config) => { if (process.env.NODE_ENV === 'production') { //生产环境位置...
        } else { //开发环境配置...
 } }, // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
 pwa: {}, // 第三方插件配置
 pluginOptions: {}, //Vue CLI 内部的 webpack 配置是经过 webpack-chain 维护的
    chainWebpack: (config) => { //为 import 的引用路径添加别名
 config.resolve.alias .set('@', resolve('src')) }, // Server配置
 devServer: { port: 3000, proxy: null, before: app => { } } };