使用vscode進行vue.js項目搭建
vue.js是什么?
Vue.js（讀音 /vjuː/, 類似於 view） 是一套構建用戶界面的 漸進式框架。
一、vue.js環境安裝
因為vue.js運行在node.js 的npm環境下,所以必須先安裝node.js。
安裝步驟：
1、node.js npm環境 Windows 安裝包(.msi)
32 位安裝包下載地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi
64 位安裝包下載地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi
按照安裝詳細步驟進行安裝：（詳細步驟）
在cmd中查看安裝版本
備注：安裝方式不只這一種：也可使用淘寶的npm鏡像： npm install -g cnpm --registry=https://registry.npm.taobao.org 即可安裝npm鏡像，以后再用到npm的地方直接用cnpm來代替就好了 。
2.安裝好npm之后，然后安裝全局vue-cli 腳手架工具，用於搭建項目基本框架（也就是各種基本的模版文件）
輸入命令：cnpm install -g vue-cli
等待安裝成功,輸入命令：vue 檢測安裝成功與否（如圖為安裝成功）
3.安裝完全局腳手架后，創建項目vue init webpack vue_project(vue_project為項目名) 如圖：
在創建過程中會詢問的一些問題：
項目名稱
項目描述
項目作者
Use ESLint to lint your code? 這個問題非常重要：就是是否使用EsLint 去規范的代碼？也就是說如果你選擇了Yes ，你的代碼會非常的嚴格，不能多一個空格，否則會報錯，所以最好選擇No
然后等待創建完成
創建后的項目文件：
4.vue-cli安裝出來的項目模板間是相互依賴的，所有我們需要進入項目中安裝項目依賴。cd vue_project 回車 進入項目中(cd是進入的意思)
★★★ 此處需特別注意：從npm上安裝依賴，即npm install雖然慢了點，但是安裝的依賴包是完全的，沒有少文件。
如若從cnpm上安裝依賴，即cnpm install 可能會導致最后安裝的依賴包不完整。
★不建議從淘寶鏡像上即cnpm安裝依賴，可能會導致項目運行不了。
（出問題時可以試着兩者都試試）
完成后你會發現項目中多了個node_modules文件，就是依賴包。
操作完成之后，項目文件中會多出node_modules 文件夾，即這個文件就是項目依賴，如圖：
5、運行你的第一個vue項目
輸入命令： cnpm run dev
發布成功的查看地址就是：http://localhost:8082 可以直接在瀏覽器中查看
二、安裝vscode 並將項目運行在vscode中
1、按照官方步驟安裝vscode
2、添加基本擴展
3、打開項目文件夾
並編輯index.html
三、vue項目打包
1、大家都知道使用npm run build進行打包，這個時候你直接打開dist/下的index.html,會發現文件可以打開，但是所有的js，css，img等路徑有問題是指向根目錄的，
查看config/index.js里的assetsPublicPath的字段，初始項目是/他是指向項目根目錄的，此處配置可以修改視具體情況而定下面三種情況為配置值具體含義。
- ./ 當前目錄
- ../ 父級目錄
它如同一棵大樹的“根”一般，所有的樹杈以它為起點，故被命名為根目錄。以微軟公司開發的Windows操作系統為例：
打開我的計算機（計算機），雙擊C盤就進入C盤的根目錄。雙擊D盤就進入D盤的根目錄
build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './', productionSourceMap: true, // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: false, productionGzipExtensions: ['js', 'css'], // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or offbundleAnalyzerReport: process.env.npm_config_report }
如果項目有用到vue-router注意到src/router目錄下的index.js文件里將
mode:'history',這行注釋掉並在下一行配上base:'/'，base取值與assetsPublicPath一致
3.將打好的包（即dist文件夾）上傳到服務器，並配置nginx可以訪問到dist文件夾下的index.html即可
文檔內容參考：https://my.oschina.net/ljavastudent/blog/1819413