Vue从零开始（2）：使用Vue CLI快速生成项目脚手架

前言

上一篇讲到如何搭建前端环境，这一篇我们开始使用Vue CLI来快速生成一个Vue的项目脚手架。

目前Vue CLI有两个版本，新版本Vue CLI3对应@vue/cli，老版本Vue CLI2对应vue-cli。这里分别介绍这两个版本如何创建一个项目。

首先全局安装这两个的其中一个（看过我第一篇已经安装过的可以忽略掉）：

$ cnpm install -g @vue/cli

$ cnpm install -g vue-cli

注意：在同一个环境安装Vue CLI3和Vue CLI2的话，因为他们都是用相同的vue命令，Vue CLI2会被覆盖掉，这时候想要使用Vue CLI2的vue init来搭建项目的话，需要全局安装一个桥接工具：

$ cnpm install -g @vue/cli-init

使用Vue CLI3创建一个项目

1. 运行以下命令创建一个项目：

   $ vue create vue-demo
   

2. 选择Manually select features进行手动配置：

3. 依次勾选Babel (语法编译器)、Router (Vue路由)、Vuex (Vue全局状态管理)、CSS Pre-processors (CSS预处理)、Linter/Formatter (代码检查/格式化)

   

4. 询问是否使用history模式的路由，它的区别是使用history模式的话url不会带有#，这里我们选择y

   

5. 选择一种CSS的类型，这里我们使用sass，选择第一个Sass/SCSS (with dart-sass)

   

6. 选择一种代码检查/格式化工具，在这一篇文章我有讲到使用ESLint+Prettier来格式化代码，这里我们选择ESLint + Prettier

7. 这一步选择Lint on save

8. 询问Babel、ESLint等配置文件存放位置，可以选择生成单独的配置文件，也可以选择在在package.json里生成配置，这里我们选择第一个单独的配置文

9. 询问是否保存这些配置，保存配置可以在下次创建项目的时候直接使用已保存的配置快速生成一个Vue项目，选择y，输入预设的名字保存该预设。

    

   

10. 询问使用yarn还是npm包管理工具，这里我们选择npm

11.  

12. 等待依赖安装完成：

    

    当出现以下内容表示安装完成：

     

到这里，一个使用Vue CLI3创建的Vue项目就搭建好了，我们使用VSCode打开来看一下目录结构：

另外Vue CLI3也可以使用图形化界面来搭建项目，使用vue ui命令启动GUI页面，然后在浏览器地址栏输入http://localhost:8000就能打开了，搭建过程与上面讲解的一样，可以自己了解一下。

使用VSCode开发Vue项目需要安装Vetur插件

|-- vue-demo
    |-- .browserslistrc            // 浏览器兼容配置文件
    |-- .eslintrc.js               // ESLint配置文件
    |-- .gitignore
    |-- README.md
    |-- babel.config.js            // babel配置文件
    |-- node_modules               // 依赖包文件夹，存放着开发依赖和运行依赖
    |-- package-lock.json
    |-- package.json               // 项目描述文件
    |-- public                     
    |   |-- favicon.ico            // 网页图标
    |   |-- index.html             // 入口页面
    |-- src                        // 源码目录，所以开发的页面都在这里面
        |-- App.vue                // 根组件
        |-- main.js                // 程序入口文件
        |-- assets                 // 资源目录
        |   |-- logo.png           
        |-- components             // vue公共组件目录
        |   |-- HelloWorld.vue     // 这是一个HelloWorld组件
        |-- router                 // vue前端路由文件目录
        |   |-- index.js           
        |-- store                  // vue全局状态管理文件目录
        |   |-- index.js           
        |-- views                  // vue视图文件目录
            |-- About.vue          // About页面
            |-- Home.vue           // Home页面

使用Vue CLI2创建一个项目

运行以下命令开始创建一个项目：

$ vue init webpack vue2-demo

 

1. 配置项目名称，可以使用第一步的vue2-demo，我们直接回车跳过：

   

2. 项目描述，默认就行，后期可在package.json里自行更改：

   

3. 作者信息，同上：

   

4. 构建模式我们选择第一个，具体区别可参考官方文档：

5. 选择y使用Vue路由：

   

6. ESLint我们也勾上：

   

7. 选择ESLint预设，前两种是预设好的风格，后面有提供地址，可以去了解一下，第三个是自定义风格，这里我们默认第一个：

8. 单元测试：n（后期需要，可以手动添加）

9. e2e测试同上：

10. 默认使用npm包管理工具：

    

11. 等待依赖下载完成，以下是完整配置：

    

12. 当出现Project initialization finished!的时候表示这个项目就初始化好了：

    

同样，我们用VSCode打开来看一下目录结构：

|-- vue2-demo
    |-- .babelrc                   // 浏览器兼容配置文件
    |-- .editorconfig
    |-- .eslintignore              // ESLint忽略文件
    |-- .eslintrc.js               // ESLint配置文件
    |-- .gitignore
    |-- .postcssrc.js              // 配置给CSS样式添加浏览器前缀
    |-- README.md
    |-- index.html                 // 入口页面
    |-- node_modules               // 依赖包文件夹，存放着开发依赖和运行依赖
    |-- package-lock.json
    |-- package.json               // 项目描述文件
    |-- build                      // webpack相关配置文件目录
    |   |-- build.js               // 生产环境构建
    |   |-- check-versions.js      // 版本检查
    |   |-- logo.png
    |   |-- utils.js               // 构建相关工具
    |   |-- vue-loader.conf.js     // CSS加载器配置
    |   |-- webpack.base.conf.js   // webpack基础配置
    |   |-- webpack.dev.conf.js    // webpack开发环境配置
    |   |-- webpack.prod.conf.js   // webpack生产环境配置
    |-- config                     // vue配置文件目录
    |   |-- dev.env.js             // 项目开发环境配置
    |   |-- index.js               // 项目主要配置
    |   |-- prod.env.js            // 项目生产环境配置
    |-- src                        // 源码目录，所以开发的页面都在这里面
    |   |-- App.vue                // 根组件
    |   |-- main.js                // 程序入口文件
    |   |-- assets                 // 资源目录
    |   |   |-- logo.png
    |   |-- components             // vue公共组件目录
    |   |   |-- HelloWorld.vue
    |   |-- router                 // vue前端路由文件目录
    |       |-- index.js
    |-- static                     // 静态资源目录
        |-- .gitkeep

运行项目

当我们使用Vue CLI3或者2搭建好一个项目后，我们怎么让着个项目运行起来呢？在项目根目录中，有一个package.json文件，它是一个前端项目的描述文件，它包含着许多元信息，比如项目名称(name)、项目版本(version)、项目描述(description)、启动脚本(scipts)以及依赖包配置(其中dependencies是运行依赖，devDependencies是开发依赖)等等。

我们要运行项目的话，只需要关注scripts属性里面的内容即可：

• vue-demo的package.json里的scripts：

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
  

  在项目根目录下使用命令运行项目：

  $ npm run serve
  

• Vue2-demo的package.json里的scripts：

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  }
  

  在项目根目录下使用命令运行项目：

  $ npm run start
  

可以看出，使用Vue CLI3和2创建的项目启动脚本还是有所区别的，但它们都是基于webpack进行打包构建的。

项目启动成功后，在浏览器地址栏输入：http://localhost:8080 （根据运行后命令行提示的地址打开浏览器，一般默认是http://localhost:8080）就可以查看你的前端页面了。

运行他人的项目

一般我们从git上或者从别人那里拿到一个Vue项目，在运行之前，我们需要在根目录使用命令来安装该项目所需要的所有依赖包。

1. 使用以下一种命令安装项目依赖：

   $ npm i
   #或者
   $ cnpm i
   # i为install的缩写，也可以使用 npm install / cnpm install
   

2. 安装完成后，项目根目录会有一个node_modules文件夹，这个文件夹用于存放项目所需的开发依赖以及运行依赖。然后根据package.json里的scripts属性内容来运行项目，一般为npm run start或npm run serve。

写在最后

看到这里，我想大家对Vue项目的搭建到运行都有了一个简单的了解，可以拿到一个项目文件，就能自己动手让它跑起来。下一篇将介绍如何打包一个Vue项目以及多环境打包配置。

我慢慢的写，你们慢慢的看~

上一篇：《Vue从零开始（1）：前端环境搭建》