Vue进阶之Vue-cli构建项目

前置条件：电脑已安装node.js，能正常使用npm，检测是否安装了npm及版本情况，可以直接在命令行中输入 npm -v，如果出现版本号说明已安装node。如果没有安装node的，请去node官网下载，下载地址为https://nodejs.org/en/download。

接下来，使用命令 npm install -g vue-cli，其中"-g"代表全局安装，安装成功之后，可以使用vue -V来检查是否安装了vue-cli以及查看版本号，我的版本号为2.9.3。

安装完了vue-cli之后，我们就可以构建我们的项目了，首先，我们初始化项目，使用命令 vue init <template-name> <project-name>

注意：init表示要用vue-cli来初始化项目

<template-name>为模板名称，vue-cli官方提供了5种模板，

webpack-一个全面的webpack+vue-loader的模板，功能包括热加载，linting，检测和CSS扩展（我推荐用这个模板）

webpack-simple-一个简单webpack+vue-loader的模板，不包含其他功能

browserify-一个全面的Browserify+vueify的模板，功能包括热加载，linting，单元检测。

browserify-simple-一个简单的Browserify+vueify的模板，不包含其他功能

simple-一个最最简单的单页应用模板。

<project-name>这个是就项目名称，可以自己命名

这里，我使用webpack这个模板，查看模板地址为https://github.com/vuejs-templates/webpack/tree/develop/template

使用命令vue init webpack example

输入这个指令后，会需要我们确认项目的基本信息

Project name：项目名称，一般直接回车即可，需要注意的是项目名称不能出现大写字母

Project description ：项目描述，可以编写也可以直接回车

Author：作者，直接回车即可，如果电脑上有配置git，会自动读取

Install vue-router：是否安装vue的路由插件，选择Yes既可

Use ESLint to lint your code：是否使用ESLint来限制代码错误和风格，选择Yes即可，然后可以在.eslintrc.js文件中配置错误及风格

Set up unit tests：是否需要进行单元测试，一般不需要，选择n，根据项目需要选择

Setup e2e tests with Nightwatch：是否安装e2e来进行用户行为的模拟测试，一般也不需要，选择n

Should we run 'npm install' for you after the project has been created：项目被创建后是用npm install来安装依赖还是选其他的，我选择第一个npm，当然，使用Yarn可能会更快一些，但还是跟着文档走吧

项目到此就创建好了，可以尽情的写啦！

当然，如果做移动端的项目呢，建议使用minit-ui，PC端的呢，就用element-ui吧

关于CSS，我习惯使用scss，因此这里我需要安装sass的依赖包，使用命令 npm install --save-dev sass-loader以及npm install --save-dev node-sass，因为sass-loader依赖于node-sass，因为最新的脚手架vue-cli已经在bulid/utils.js加入了处理sass的loader，故可以直接使用

使用方法如图所示，scoped用来隔离作用域，使css样式不会作用到其他vue文件中的样式，lang='scss'是sass的语法