前言

vue是現階段很流行的前端框架，很多人通過vue官方文檔的學習，對vue的使用都有了一定的了解，但再在項目工程化處理的時候，卻發現不知道改怎么更好的管理自己的項目，如何去引入一些框架以及vue全家桶其他框架的使用，以下將詳細地介紹本人在處理工程文件構建的過程；對于剛開始解除vue的新手，建議使用官方腳手架vue-cli,當然，如果你對于webpack很熟悉，你也可以自己動手搭建自己的腳手架，當然如果你沒把握的話，還是推薦使用vue-cli，能更好的幫助你搭建項目：

步驟一、安裝vue-cli

首先，我們可以通過npm安裝vue-clic,前提是我們需要有node環境，如果電腦還沒安裝node，先安裝，可通過

node -v

查詢node的版本號，有版本號則已經安裝成功；

接下來，我們需要確保電腦已經安裝了webpack，webpack是一個包管理工具，也是vue-cli的構建工具，安裝也很簡單，全局安裝只需要執行

npm install webpack -g

緊接著，開始我們vue-cli的安裝

npm install --global vue-cli

查看是否安裝成功，我們可以通過在cmd中輸入vue -V 查看，如下圖出現版本號則說明安裝已經完成；

我們可以打開c盤>用戶>用戶名>AppData>Roaming>npm查看我們全局安裝的vue-cli,如下圖：

步驟二、構建工程文件

安裝完vue-cli后，我們可以通過在cmd中輸入

vue init webpack projectName

生成webpack腳手架，在我們按下回車的時候，會出現一些提示問題，對應關系如下：

• 項目名稱(注意名稱中不要出現大寫字母，否則會報錯)
• 項目描述(可寫可不寫，看個人需要)
• 作者(可寫可不寫，看個人需要)
• vue編譯，這個選默認即可，運行加編譯Runtime + Compiler
• 是否安裝vue-router是否安裝vue路由工具
• 是否使用代碼管理工具ESLint管理你的代碼
• 后面幾個是測試的工具，需要自己自行了解
• ......

緊接著，我們使用cd squareRoot 移動到文件夾squareRoot下，執行

npm install

初始化項目，安裝package.json 文件中描述的依賴，初始化完成后，我們可以通過

npm run dev

運行我們的項目，這個時候，我們可以打開瀏覽器，輸入http://localhost:8080/，可看到如下界面，說明我們的項目腳手架已經初始化完成；

步驟三、項目結構解析

雖然我們是通過vue-cli生成的項目結構，但還是希望讀者能夠清楚的知道每個文件的作用，這樣對于我們學習該腳手架以及搭建自己的腳手架會有很好的幫助，如下圖，是一級目錄下的文件的作用：

構建相關的代碼主要是放在build文件夾和config文件夾下，包括了開發環境和生產環境，即dev和product,可以打開文件進行閱讀，有接觸過node的小伙伴應該可以很快讀懂對應文件代碼的作用，這里就不做詳細的介紹了，需要注意的一點是，我們需要修改打包后文件的路徑的時候，可以通過修改config文件夾下的index.js文件，如下圖：

這里，我們需要在src目錄下新增一個page文件夾，用于存放頁面相關的組件，而components存在的是公共的組件，這樣做有利于我們更好的理解項目：

步驟四、引入UI框架iView

該步驟并不是一定要實現的，實際項目操作中，要根據具體需求而引入對應的UI框架或者不引入，鑒于指導的作用，在此處也做個示范，給與參考，可先閱讀iVew官網學習；

首先，我們應進行iView的安裝，可利用npm包管理工具安裝

npm install iview --save

安裝成功后，我們要將對應的框架引入到項目中，這個時候，官網上有兩種方法可以實現，第一種是直接在main.js中做如下配置：

import Vue from 'vue'import App from './App'import router from './router'import iView from 'iview';import 'iview/dist/styles/iview.css';Vue.config.productionTip = falseVue.use(iView);/* eslint-disable no-new */new Vue({ el: '#app', router, components: { App }, template: ''})

這種方式是一種全局引入的方式，引入后就在具體的頁面或者組件內不需要再進行其他的引入，但缺點是無論是否需要該組件，都將全部引入，對于性能優化不是很好，這里推薦第二種用法，按需引入，這里需要借助插件babel-plugin-import實現按需加載組件，減小文件體積。首先需要安裝，并在.babelrc中配置：

npm install babel-plugin-import --save-dev// .babelrc{ "plugins": [["import