## 技術棧 * npm ： node.js的包管理工具，管理前端項目需要用到的包、插件、工具和命令等 * ES6 ， ECMAScript6的簡稱， 是JavaScript的新版本 * vue-router Vue.js 配套路由 * Element ， UI框架 * vue-cli, Vue的工具， 可以自動生成Vue項目 * vue-router , Vue提供的前端路由工具。用于實現頁面的路由控制和局部刷新， 實現前后端分離。 * vuex ： Vue提供的狀態管理工具。管理項目中各種數據的交互和重用，存儲需要使用的數據對象。 * webpack: 文件打包工具。將前端項目文件打包壓縮到一個js文件中，使用vue-loader等加載器實現語法轉換和加載。 ## 環境及版本 * Windows 10, 64 bit * Node.js v12.18.3-x64 * @vue/cli@4.5.4 Vue CLI v4.5.4 * ## 創建Vue項目框架 1. 安裝Node.js https://nodejs.org/zh-cn/ ## 設置模塊安裝位置 ``` npm config list npm config set prefix "D:\install\nodejs\node_global" npm config set cache "D:\install\nodejs\node_cache" ```  這里D:\install\nodejs 是本地機器得Node.js得安裝路徑. node_global配置后會自動創建, 用來存放全局得模塊. 3. 安裝Vue CLI （全局安裝） ``` npm install -g @vue/cli ``` * Vue CLI 是Vue的腳手架工具， 可以用來創建項目。 4. 創建Vue項目 ``` vue create my-vue-ele ``` Vue Cli 3及之前的版本使用的是以下命令創建。 ``` vue init webpack 項目名 ``` 2. 安裝Vue (當前目錄) ``` npm install vue ``` * 可以全局安裝，但建議不全部安裝。因為在同一臺機器基于不同版本的Vue進行開發。 5. 安裝依賴 進入項目路徑， 執行 ``` npm run dev ``` ## 安裝Element UI 1. 安裝 ``` npm i element-ui -S ``` 2. 在app.vue中引入 element-ui ## webpack +sass ``` npm install sass --save-dev npm install style-loader css-loader sass-loader --save-dev ``` less ： css預處理語言， 拓展了css,增加了變量 ， Mixin等 * sass-loader用來打包 * style-loader和css-loader 將sass解析成css ## 項目目錄和文件說明 * build ## 出錯問題解決 ``` npm WARN saveError ENOENT: no such file or directory, ```  ``` npm uninstall vue ``` 卸載并刪除 package-lock.json ### ``` npm install vue-router npm install vue-router --save-dev npm install vuex --save npm install --save stylus-loader stylus ``` * common/local-storage 本地存儲 *