使用vscode進行vue.js項目搭建和打包

使用vscode進行vue.js項目搭建

vue.js是什麼?

Vue.js（讀音 /vjuː/, 相似於 view） 是一套構建用戶界面的 漸進式框架。

1、vue.js環境安裝

　　由於vue.js運行在node.js 的npm環境下,因此必須先安裝node.js。

　　安裝步驟：

　　一、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 文件夾，即這個文件就是項目依賴，如圖：

　　　　

　　五、運行你的第一個vue項目

　　輸入命令： cnpm run dev

　　

　　發佈成功的查看地址就是：http://localhost:8082  能夠直接在瀏覽器中查看

2、安裝vscode 並將項目運行在vscode中

　　一、按照官方步驟安裝vscode 

　　二、添加基本擴展

　　

　　三、打開項目文件夾

　　

　　並編輯index.html 

　　

　　

3、vue項目打包

　　

　　一、你們都知道使用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