Element 是餓了麼全段開發團隊推出的一套基於 vue.js2.0 的 PC Web 端開發框架。
Element 中文文檔：https://element.eleme.cn/#/zh-CN
1.安裝Node
開發框架和環境都是需要 Node.js ，所以需要先安裝 node.js 環境，
vue的運行是要依賴於 node 的 npm 管理工具來實現，Node官網下載地址： https://nodejs.org/en/download/。
安裝過程一路Next就可以，安裝完成之後，便可以打開 cmd 開始輸入命令。
可以輸入 node -v ，回車以查看node版本號，出現版本號則說明安裝成功。
2.替換 npm 地址
由於 npm 是國外的，使用起來速度可能會比較慢。所以我們使用淘寶的 cnpm 鏡像。淘寶的 cnpm 命令管理工具可以代替默認的 npm 管理工具。
在 cmd 中輸入命令即可。這一步可以跳過。
1 npm i -g cnpm --registry=https://registry.npm.taobao.org
3.全局安裝 vue-cli 鏡像
在 cmd 輸入命令安裝 vue-cli。
1 cnpm i -g vue-cli
安裝完成後，在命令中輸入vue，會輸出vue的信息，則說明安裝成功。
4.使用 vue-cli 初始化 vue 項目
首先使用 cmd 進入到你希望創建項目的目錄，如果想要切換盤符，例如切換到 D盤 使用命令：
1 D:
然後使用 cd 路徑命令即可進入到文件夾，例如：
1 cd D:\MyProject
創建項目，使用命令：
1 vue init webpack YourProjectName
然後會需要你輸入一些項目的基本信息。
Project name :項目名稱 ，如果不需要更改直接回車就可以了。注意：這裏不能使用大寫。
Project description:項目描述，默認爲A Vue.js project。直接回車，不用編寫。
Author：作者，如果你有配置git，他會讀取.ssh文件中的user。
Install vue-router? 是否安裝vue的路由插件。Y代表安裝，N無需安裝，下面的命令也是一樣的。
Use ESLint to lint your code? 是否用ESLint來限制你的代碼錯誤和風格。建議N。
setup unit tests with Karma + Mocha? 是否需要安裝單元測試工具Karma+Mocha。
Setup e2e tests with Nightwatch?是否安裝e2e來進行用戶行爲模擬測試。
Should we run npm install for you after the project has been created?(recommended) 選擇npm。
創建完成之後，cmd 中會提示如下命令：
1 cd YourPrpojectName 2 npm run dev
則表示創建成功。
此時可以輸入這兩行命令，來運行你的項目。
cmd 將會輸出你的項目運行端口，一般默認是 http://localhost:8080/。
打開瀏覽器輸入地址即可看到 vue 的 hello world 界面。
如果想結束進程，可以在啓動的 cmd 中按下 ctrl+c 然後輸入Y，即可結束。
5.安裝 Element-ui
使用命令
1 npm i element-ui -S
cmd 顯示安裝成功之後。
在 components 文件夾下創建一個 test.vue 文件，我們複製一段 elementUI 官方文檔的代碼。進行測試。
1 <template> 2 <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> 3 <el-menu-item index="1">處理中心</el-menu-item> 4 <el-submenu index="2"> 5 <template slot="title">我的工作臺</template> 6 <el-menu-item index="2-1">選項1</el-menu-item> 7 <el-menu-item index="2-2">選項2</el-menu-item> 8 <el-menu-item index="2-3">選項3</el-menu-item> 9 </el-submenu> 10 <el-menu-item index="3"> 11 <a href="https://www.ele.me" target="_blank">訂單管理</a> 12 </el-menu-item> 13 </el-menu> 14 </template> 15 16 <script> 17 export default { 18 data() { 19 return { 20 activeIndex: '1', 21 activeIndex2: '1' 22 }; 23 }, 24 methods: { 25 handleSelect(key, keyPath) { 26 console.log(key, keyPath); 27 } 28 } 29 } 30 </script>
然後在 App.vue 中引入 test.vue
1 <template> 2 <div id="app"> 3 <img src="./assets/logo.png"> 4 <router-view/> 5 <Test></Test> 6 </div> 7 </template> 8 9 <script> 10 import Test from './components/test.vue' 11 12 export default { 13 components:{ 14 Test, 15 }, 16 name: 'App' 17 } 18 </script> 19 20 <style> 21 #app { 22 font-family: 'Avenir', Helvetica, Arial, sans-serif; 23 -webkit-font-smoothing: antialiased; 24 -moz-osx-font-smoothing: grayscale; 25 text-align: center; 26 color: #2c3e50; 27 margin-top: 60px; 28 } 29 </style>
在 main.js 引入 element-ui 的 js 和 css
1 import ElementUI from 'element-ui' 2 import 'element-ui/lib/theme-chalk/index.css' 3 Vue.use(ElementUI)
確認無誤後再次使用命令
npm run dev
運行，即可看到頁面上多出了 element-ui 的菜單組件。
至此，開發環境已經可以運行。
最後附送一下如何運行同步來的代碼等。例如在團隊開發中，大家通常是合作開發，都需要搭建開發環境。個人也有可能需要進行代碼同步，在不同的開發主機開發。
按照本文第1步，第2步，第3步.之後 需要安裝 webpack
使用命令：
1 npm i -g webpack
之後，在 cmd 中 cd 到項目路徑中。
使用命令：
1 npm install
來安裝項目的依賴，可以理解爲像 C# Nuget 的還原包。安裝完成後即可運行。