目前主流的前端开发框架有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打包命令，打包生成最终的代码
网友评论