vue-cli 2搭建前端项目

目前主流的前端开发框架有React、Angular和Vue。随着webpack等工具的兴起，前端项目的构建和打包开始工程化，但是针对不同的前端框架以及开发模式，webpack的配置不尽相同，而且配置起来异常繁琐。所以为了快速搭建前端项目，这些前端框架都推出了各自的项目构建脚手架工具，例如create-react-app以及vue-cli。
本文将介绍vue-cli的使用和配置过程，方便新手人门参考。

安装

安装node

如果你的电脑未安装node，请去官网下载node安装包并将node安装好。

设置npm源

如果你的node npm源还未设置成taobao源，请设置npm源为taobao源（官方源服务器在国外，速度堪忧，切换成国内taobao源镜像）

// 查看npm源
npm config get registry
// 设置为taobao源
npm config set registry http://registry.npm.taobao.org/

安装Webpack Dev Server

//   i为install首字母   -g为全局安装
npm i webpack-dev-server -g

全局安装vue-cli

// 可能需要sudo权限
// sudo npm install -g vue-cli
npm install -g vue-cli

完成vue-cli的安装，便可以使用相关的命令去构建项目了。

使用

命令行使用

使用vue-cli创建项目：

vue init webpack vue-sample

其中vue-sample是我们所起的项目名，命名执行后，会进入项目初始化阶段。类似于npm init，需要开发者根据命令行的相关提示设置项目初始化信息，以mac系统下为例：

新建项目

• ? Project name vue-sample 设置项目名，可以直接按回车使用默认项目名vue-demo
• ? Project description A Vue.js project 设置项目描述，可以直接按回车使用默认描述
• ? Author xxxxx <xxxxxxxxxx>设置作者信息，或直接回车使用默认值

❯ Runtime + Compiler: recommended for most users
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific H
TML) are ONLY allowed in .vue files - render functions are required elsewhere  

• Runtime + Compiler：推荐的方案，包括运行和编译模块
• Runtime-only：仅运行模块，更轻量级，但是在.vue文件外不允许使用templates（需使用render函数来取代对应的template属性设置）
• ? Install vue-router? (Y/n) 是否安装vue-router？ 如果你的项目是单页应用并且包含多个细分页面，建议安装。如果你的页面只有一个或者多个不相干的页面，则不需要安装。
• ? Use ESLint to lint your code? (Y/n) 是否使用ESLint来规范你的代码？ESLint是一款js代码风格管理工具，用于统一和规范代码风格，对于js这种脚本语言来说，良好规范的代码风格有助于提高代码的可读性和组织性，建议按照个人习惯使用。

选择使用ESLint之后，会出现ESLint预设配置选择：

• ? Set up unit tests (Y/n) 是否安装单元测试框架。

? Should we run `npm install` for you after the project has been created? (recom
mended) (Use arrow keys)
❯ Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself

在项目创建之后是否执行 npm install 命令安装项目依赖，可以选择使用npm或者yarn（需使用npm全局安装yarn命令并设置yarn源为淘宝源）命令或者后续自己执行相关命令安装依赖，建议使用npm。

注意：若项目中在.vue文件中使用了less来书写style模块（lang=less）或者引用了.less样式文件，需要手动安装less以及less-loader模块后页面才会正常运行，sass同理。运行 npm i less less-loader -D 命令快捷安装。

//  -D是 --save-dev的简写
npm i less less-loader -D

项目结构梳理

初始目录结构

项目初始目录结构如下：

初始化项目结构

下面对项目结构做下简单介绍：

• build: 提供webpack各环境配置方案、webpack构建和打包任务脚本（通过npm run build命令启动）
• config：webpack、webpack-dev-server相关的配置参数
• node_modules：node模块文件夹，通过npm安装的模块会存放在这里
• src：项目开发文件夹，我们写的代码基本都放在这里
• static：静态资源文件夹
• .babelrc：babel配置文件
• .editorconfig：编辑器配置文件
• .gitignore：git忽略文件配置文件，相关文件将不会被放入到git仓库中
• .postcssrc.js：postcss配置文件，用于启用相关的postcss插件
• index.html：HtmlWebpackPlugin使用的html模板文件，用于自动生成相应的html模板
• package.json：项目npm配置文件，主要记录项目基本信息、引用的npm模块信息、script命令列表等
• README.md：项目说明MarkDown文件

注意：项目中的静态资源文件有两个地方可以存放，分别是static文件夹和src/assets文件夹，这两个文件夹下的资源在处理上是不同的。具体表现为：

• assets 目录中的文件会被webpack处理解析为模块依赖，只支持相对路径形式如，background: url(./logo.png)中，"./logo.png" 是相对的资源路径，将由Webpack解析为模块依赖
• static 目录下的文件并不会被Webpack处理，它们会直接被复制到最终的打包目录（默认是dist/static）下。必须使用绝对路径引用这些文件，这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 配置来确定的

src目录结构

src文件夹内包含：

• assets文件夹：存放开发中使用到的各类资源文件（如图片、字体、样式等）
• components文件夹：Vue组件存放文件夹，用于存放开发的vue组件
• router文件夹：存放vue-router配置模块
• App.vue：Vue应用根组件
• main.js：项目入口js文件（webpack entry）

src目录结构调整

• 可以在assets文件夹中添加相应的子文件夹来管理相应的资源，如style、img、font等
• 可以在components文件夹中添加common（常用模块）、page（页面模块）等文件夹来管理相应模块

常用命令

npm run dev
开启webpack-dev-server热重载调试服务器，调试本地页面和代码逻辑

npm start
npm run dev命令简写

npm run build
执行webpack打包命令，打包生成最终的代码