[@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文件的