使用vue-cli 3.0搭建vue项目

1.介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

通过 @vue/cli 搭建交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
一个运行时依赖 (@vue/cli-service)，该依赖：
- 可升级；
- 基于 webpack 构建，并带有合理的默认配置；
- 可以通过项目内的配置文件进行配置；
- 可以通过插件进行扩展。
一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。

2.安装

Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。

可以使用下列任一命令安装这个新的包：

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

(注：mac下如果安装失败可以使用：sudo npm install -g @vue/cli)

lu:WebstormProjects lu$ sudo npm install -g @vue/cli
Password:
/usr/local/bin/vue -> /usr/local/lib/node_modules/@vue/cli/bin/vue.js

> [email protected] install /usr/local/lib/node_modules/@vue/cli/node_modules/fsevents
> node install

[fsevents] Success: "/usr/local/lib/node_modules/@vue/cli/node_modules/fsevents/lib/binding/Release/node-v51-darwin-x64/fse.node" is installed via remote

> [email protected] postinstall /usr/local/lib/node_modules/@vue/cli/node_modules/protobufjs
> node scripts/postinstall


> [email protected] postinstall /usr/local/lib/node_modules/@vue/cli/node_modules/nodemon
> node bin/postinstall || exit 0

Love nodemon? You can now support the project via the open collective:
 > https://opencollective.com/nodemon/donate

/usr/local/lib
└─┬ @vue/[email protected] 
  ├─┬ @vue/[email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └── [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├── [email protected] 
  │ │   ├── [email protected] 
  │ │   ├── [email protected] 
  │ │   └── [email protected] 
  .................
  │ └── [email protected] 
  ├── [email protected] 
  ├─┬ [email protected] 
  │ └── [email protected] 
  └─┬ [email protected] 
    └── [email protected]

安装之后，你就可以在命令行中访问 vue 命令。

你可以用这个命令来检查是否正确安装：

vue --version

输出结果如下：

lu:WebstormProjects lu$ vue --version
3.0.3

3.创建项目

运行以下命令来创建一个新项目：

vue create interface

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。

lu:WebstormProjects lu$ vue create interface

Vue CLI v3.0.3
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features

这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。

lu:WebstormProjects lu$ vue create interface

Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
❯◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

当你选择后会出现上面图上的东西，这里你可以自由选择用哪些配置，按上下键选择，按空格键确定，所有的都选择好后，按enter键进行下一步，这里我在项目中选择了Babel、Router、Vuex、CSS Pre-processors、Linter / Formatter。

Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-proce
ssors, Linter
? Use history mode for router? (Requires proper server setup for index fallback 
in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): Sass/SCSS
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In packag
e.json
? Save this as a preset for future projects? Yes
? Save preset as: interface

上面就是一些配置的选择，你可以根据项目需要选择。

创建完成后会生成如下的项目结构：

相比2.0精简了很多，然后进入项目，启动服务：

cd interface
npm run serve

启动如下页面：

4.项目配置

要进行项目的配置，需要在根目录下新建在根目录下创建vue.config.js，在该文件中可以进行项目的配置

具体的配置项可以参考https://cli.vuejs.org/zh/config/

这里给出了简单的配置：

module.exports = {
    // 基本路径
    baseUrl: '/',
    // 输出文件目录
    outputDir: 'dist',
    // eslint-loader 是否在保存的时候检查
    lintOnSave: true,
    // use the full build with in-browser compiler?
    compiler: true,
    // webpack配置
    chainWebpack: () => {},
    configureWebpack: () => {},
    // vue-loader 配置项
    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
    dll: true,
    // PWA 插件相关配置
    pwa: {},
    // webpack-dev-server 相关配置
    devServer: {
        open: true,
        host: 'localhost',
        port: 8080,
        https: false,
        hotOnly: false,
        proxy: null, // 设置代理
        before: app => {}
    },
    // 第三方插件配置
    pluginOptions: {
        // ...
    }
}