使用vue-cli快速创建工程化vue项目以及添加Vue-router+Sass

这篇文章主要描述，你如何快速创建一个工程化的vue项目。

使用vue-cli,会非常容易及快速的构件一个工程化的Vue项目。我主要依赖的就是vue-cli的官方网站。https://cli.vuejs.org/zh/guide/。

基础部分

通过以下三部我们就可以快速搭建一个vue.js工程项目

第一步，是要安装vue-cli.

安装vue-cli之前,需要node.js. 怎样知道自己是否安装了node,在项目所在目录的git bash界面，或者打开cmd,输入 node -v即可。注意vue-cli要求node.js的版本在8.9以上。这里直接进入vue-cli的安装。

安装命令为：

npm install -g @vue/cli

验证是否安装成功的命令：可以直接输入你熟知的命令，或者输入命令验证vue版本，如下

vue --version

安装会需要一点的时间，我在星巴克的环境下，大概用时1分钟，耐心等待一下。如果安装成功，则会显示vue的版本号。比如 3.4.0.

第二步，创建一个工程

创建工程的命令，很简单，就一行：

vue create project-name

然后就会蹦出下面的提示，让你配置你的项目。

当你选择默认设置时，这样你只需要等待系统帮你自动创建好这个项目。此时也需要一点的时间，teminal也会提醒你"Installing CLI plugins ,this might take a while..."。界面会有相应的状态提示。

第三部，运行这个项目

正如创建项目成功后提示的两条命令，一般情形，运行项目只需要运行这两条

cd hello-march

npm install //optional,根据是否已经安装了依赖

npm run serve

成功后显示如下，如果没有在浏览器中直接打开，那么自行将地址复制到浏览器中，既可以访问到默认构建成功的vue项目。

扩展部分

安装插件：vue-router

由于一个前端项目，大多数情况都包含页面之间的跳转，页面嵌套。所以我们选择安装vue-router。

vue add router //这里问是否使用history mode,由于目前没有后端配置，选择了no

//安装之后提示有问题，没有安装依赖，根据提示的代码，将router的依赖安装即可，如果没有问题，则忽略此步。

npm install --save vue-router

//安装成功之后，则会提醒更新后的文件夹状态：

✔  Successfully invoked generator for plugin: core:router
   The following files have been updated / added:

     src/router.js
     src/views/About.vue
     src/views/Home.vue
     package-lock.json
     package.json
     src/App.vue
     src/main.js

至此，一个基本的vue工程项目就完成了。注意要重新运行 npm run serve,因为安装vue-router后，我们的文件已经发生了改变。

使用SASS

在项目中，经常会用到使用css预处理器。这里在以上的基础上，讲解如何添加SASS。

按照vue-cli文档安装时，提供的命令是

npm install -D sass-loader node-sass

有时会出现报错，改用以下两步，分别安装node-sass,和sass-loader.

npm install node-sass --save-dev //安装略长
npm install sass-loader --save-dev

以上结束后，安装成功，在package.json中会出现安装的依赖

之后，我们就可以在 .vue文件中使用sass了。例如：

<style lang="scss" scoped>
$color:red;

.home-page{
  font-size:30px;
  color:$color;
}

</style>

一些可能的报错处理

在最开始创建项目时遇到了一些问题，关键是根据报错信息日志，确定自己的报错是什么导致的。