[@vue/cli & element-ui] 安装与环境配置

开启新篇章
由于之前工作的原因，很少接触后台页面的开发，因此对传统mvvm框架或者类mvvm框架还是很有抵触的。别扭的语法，与关注点分离原则的违背，以及复杂页面交互的实现问题，这些都成为了我接触并使用它的阻碍。过去曾经维护过一个使用老版本knockout.js开发的项目，当时的感觉真的是无以言表，一度认为这简直是对前端开发的扼杀。
不过这一切，在慢慢接触到vue之后，得到了一定的改观。老实说，到现在为止，我还是认为，在前台页面的开发上，尤其是拥有复杂交互的前台页面开发，使用这种框架是很不好的选择，包括vue。但是，在后台页面的开发上，使用vue还是很香的，尤其是它能节省很多代码量，很大的降低了开发和维护成本。
对于ui框架，我差不多也是同样的感觉。前台页面的定制化程度一般都很高，而少量的定制化需求就可能让ui框架的使用成本变得很高。零星的改动，就要去翻框架源码，思寻如何进行改动，既能满足需求，又不会提高代码的维护成本。而后台页面，就很少存在这种问题，使用ui框架，能很大程度上提高开发效率。
由于工作的需要，在一些项目的框架选择上，最终敲定了vue-cli3和element-ui。在这里，记录并分享一些内容，供自己和大家参考。

1. 环境安装

1.1 @vue/cli

npm install -g @vue/cli
//or
yarn global add @vue/cli

通过以下命令可以验证安装是否成功：

vue --version

1.2 element-ui

vue-cli3下使用element-ui无需额外安装全局npm包，在创建的vue项目中安装对应的插件即可。

2. 项目创建

2.1 @vue/cli

使用以下命令创建项目：

vue create app-name

项目配置的话，按需自行选择。

2.2 element-ui

在项目中，通过以下方式安装element-ui插件：

vue add element

配置中，可以选择按需引入组件，也可以完整引入，按照个人需求自行选择。
在安装element之前，先不要改动App.vue，因为安装element的时候会将App.vue改为它的默认页面

3. 环境配置

这里主要说的是compass的配置。习惯了使用compass搞定css3样式的前缀问题，因此想把compass引入项目中。

在.vue文件的<style>中：

@import '~compass-mixins/lib/compass/_css3.scss';

即可。

波浪线对应的目录是根目录下的node_modules文件夹。

看到网上很多做法要求修改vue.config.js，但是最新版本的@vue/cli已经不再默认配置config文件，为了避免出现其他的问题，采取了这个方式来使用compass。