VUE安裝教程 —— 新手必備
VUE之windows安裝
VUE介紹
VUE作爲目前常用的一種前端技術，現在已經被廣泛使用了，當然它也確實比較簡單好用，並且是輕量級。
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計爲可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠爲複雜的單頁應用提供驅動。
我也是剛剛結束vue，跟大家一起來學習。
vue安裝必不可少的環境
- 安裝nodejs , node 安裝後npm，也就安裝好了。 或者安裝一個nvm，它可以管理當前node的使用版本。
- 安裝腳手架命令是： npm install --global vue-cli
–global這是全局安裝。
我用的nvm 放到d盤了。如果你用的是npm安裝的 ，默認是安裝在C:\Users\Administrator\AppData\Roaming\npm 路徑下 ，
有vue的相關腳本文件那就是安裝成功了。![在這裏插入圖片描述]()
創建項目
創建項目： cmd 命令窗口，cd 到工作空間（VUE項目存放的地方），創建命令： vue init webpack myVue ,。myVue是項目名哦。這時候會有一些問答題；
- project name : 這個就比較簡單了吧。項目名稱。回車是默認值。風格
- project description ： 項目描述。這個隨便。默認就是那個A vue.js project。
- author : 作者！
- vue bulid : 默認就行，創建一個獨立脫機環境。standalone。
- install vue-router : 是否安裝路由，這裏默認就行，這樣生成好的項目就會有相關的路由配置文件
- use ESlint to lint your code : 這裏選擇yes,默認使用，這樣會生成相關的ESLint配置.
- pick an ESLint preset: 這個選擇標準就行：standard，也是默認值。
- set up unit tests : 是否安裝單元測試，這個不用了吧！ no.
- setup e2e tests with nightwatch: 是否安裝e2e測試。不用了 no！
- Should we run " npm install" for you after the project has been create
在創建項目之後，我們是否應該爲您運行“NPM安裝”。 這個默認就行，人家官方也推薦。回車。
安裝進行時… … 需要一小會。
安裝完成後，他會提示你運行項目。 輸入它提示的命令就行。
cd tests
npm run dev
運行完成後，本地瀏覽器訪問：localhost:8080
界面顯示是：
項目目錄介紹
-
總結的文件結構 如圖：
![在這裏插入圖片描述]()
-
bulid 文件夾：
![在這裏插入圖片描述]()
如上圖，這個文件夾主要是進行webpack的一些配置，就我個人覺得啊~對我們最有用並且可能會使用的就是webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js三個webpack的配置文件，分別是基本webpack配置、開發環境配置、生產環境配置。實際上這些文件裏面的內容，一些簡單的配置都已經有了，包括入口文件、插件、loader、熱更新等都已經配置好了。我們要做的只是根據自己的項目有什麼loader需要增加的，比如生成環境需要加上UglifyJsPlugin插件等可以自行配置，或者一些插件增加或者不需要的刪除，其實都是和業務相關了，其他的都可以不需要動。 -
config文件夾：
![在這裏插入圖片描述]()
這幾個配置文件我覺得最主要的就是index.js 這個文件進行配置代理服務器，這個地方和我們息息相關，和後臺聯調就是在這裏設置一個地址就可以了。打開index.js 找到“proxyTable“這個屬性，然後在裏面加上對應的後臺地址即可。
4. src文件夾：
assets: 共用的樣式、圖片
“components”: 業務代碼存放的地方，裏面分成一個個組件存放，一個頁面是一個組件，一個頁面裏面還會包着很多組件
“router”: 設置路由
“App.vue”: vue文件入口界面
“main.js" 對應App.vue 創建vue實例，也是入口文件，對應webpack.base.config.js裏的入口配置
-
static 文件夾：
存放的文件不會經過webpack處理，可以直接引用，例如swf文件如果要引用可以在webpack配置對swf後綴名的文件處理的loader，也可以直接將swf文件放在這個文件夾引用 -
package.josn
這個文件有兩部分是有用的：
scripts 裏面設置命令:
例如設置了dev用於調試則我們開發時輸入的是npm run dev ；
例如設置了build 則是輸入 npm run build 用於打包;
另一部分是這裏可以看到我們需要的依賴包,在dependencies和devDependencies中，分別對應全局下載和局部下載的依賴包。