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