[@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。