Vue.js+Element-UI從0到部署:基礎篇（1.搭建前準備）

此文獻給想用vue2.0搭建一個後臺管理系統的小鞋同使用，從來沒使用過vue也沒有關係，本文我將盡力詳盡的演示每一個操作步驟，從0搭建到環境釋出，在後期我將更新，我在專案中遇到的問題，已經相關解決方案，分享給大家，供大家參考，如有錯誤和不足之處請指出。

專案技術棧及其相關文件地址

• Vue.js 2.0(以上) : cn.vuejs.org/
• Element UI : element.eleme.io
• Vue-router 2.0(以上) ： https://router.vuejs.org/zh-cn/index.html
• axios : github.com/mzabriskie/…
• Vuex2.0 : vuex.vuejs.org/zh-cn/

開發環境準備

1.請安裝node最新版本（建議安裝在系統盤-則不需要配置環境變數）

1.檢查 node 版本號，確認node安裝成功

2.安裝 cnpm 提高下載速度 ， (安裝成功後所有npm 指令可用cnpm 代替，會使用yarn，使用yarn指令安裝相關外掛也可)

npm install -g cnpm --registry=https://registry.npm.taobao.org
複製程式碼

2. 建議使用webstrom 2017版 以上開發工具

正式開始搭建專案

1.安裝vue-cli官方推薦架手架工具

cnpm install -g vue-cli
複製程式碼

2.初始化一個vue的專案

vue init webpack vue-element-project   //  [webpack] 可選的專案模板 [vue-element-project] 專案名稱
複製程式碼

3.進入檔案目錄啟動專案

cd vue-element-project             // 進入專案資料夾
cnpm install                                // 安裝相關依賴
npm run dev                             // 啟動執行專案
複製程式碼

如果在 npm run dev 中出現 xxx is not find 等類似錯誤，請手動安裝其缺少的依賴 4.瀏覽器自動開啟http://localhost:8080/#/

至此我們的vue簡易專案就搭建完畢了，下一節我們將介紹專案的目錄結構和相關依賴的配置注入 下一節：Vue.js 2.0 + Element UI 從0到部署 實踐教程（2.相關依賴注入）