Vue+VSCode開發環境搭建

時間2019.9月

1. 安裝 nodeJS; 安裝VScode

安裝好nodeJS以後,默認會安裝好npm

測試 nodeJS 和npm是否能夠執行

node -v npm -v

1.1 VScode 相關插件安裝

 ESLint 1.9.1;  LiveServer 5.6.1 (2019.9)  open in browser 2.0.0 ;   Vetur 0.22.3

格式化代碼插件 : Prettier-Code formatter 須要有簡單的配置操做 "editor.formatOnSave": true   請baidu

vue代碼提示插件:搜索 vue-snippets  或 Vue 2 Snippets  參考之

vue-beautify 2.04 發現上面很多插件版本升級了。2020.3.13

 

2. 改變nodeJS原有的環境變量,即改變nodeJS全局安裝模塊的默認目錄, 便於管理

npm config set prefix "D:\Program Files\nodejs\node_global" npm config set cache"D:\Program Files\nodejs\node_cache"

 完成後能夠在文件夾中看到相應名字的文件夾 參考

2.1  在系統環境變量添加NODE_PATH,輸入路徑爲以前指定的目錄： D:\Program Files\nodejs\node_global, 做用是使nodeJS引擎能夠找到須要的模塊

2.2  之後當執行 npm install xxx -g 安裝全局模塊時,JS模塊會安裝到這個位置

3. 安裝cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

3.1  在系統變量 path 裏設置 2步驟中的路徑, 由於cnpm會被安裝到D:\Program Files\nodejs\node_global下,以便 快速執行cnpm

檢查cnpm是否安裝

cnpm -v

4. 安裝 Vue模塊 和 vue-cli

npm install -g vue //這裏選擇全局安裝模塊
npm install -g vue-cli //cnpm 也能夠, 固然Vue的官方手冊說,新手不建議直接使用所謂的腳手架方式搭建vue應用目錄

4.1 檢查所安裝vue的版本   vue -V //是大寫的V 

4.2 最純粹Vue學習環境

5. 初始化Vue工程 參考  (怎樣在服務器端運行項目)

vue init webpack projectName //能夠將webpack改爲 webpack-simple試試,能夠幫助理解這個參數的做用,不知道能夠baidu

5.1 安裝項目依賴和運行項目

cd projectName   //進入文件目錄 
npm install     //初始化安裝依賴
npm run dev   　//運行，在瀏覽器打開http://localhost:8080，則能夠看到歡迎頁了。

 tip

快速搭建vue項目

tip1. 安裝淘寶npm

npm install -g cnpm –-registry=https://registry.npm.taobao.org //同上 

修改npm的registry爲淘寶鏡像 有3種方式 參考

npm config set registry https://registry.npm.taobao.org //改爲淘寶鏡像
npm info underscore （若是上面配置正確這個命令會有字符串response）

//不想用他們的，再設置回原來的就能夠了：
npm config set registry https://registry.npmjs.org 

檢查npm安裝鏡像源

npm config get registry

tip2:如何更新npm至最新版本

npm install npm @latest -g //能夠更新npm至最新版本
其中 @ 符號後面能夠添加你想更新到的版本號。

tip3: 要使用 <style lang="sass"> 請安裝組件

npm install sass-loader node-sass vue-style-loader --D

 其餘

vue-loader@>=10.0, simply update vue-template-compiler

直接刪除掉D:\Program Files\nodejs\node_global 下的module,而後,從新安裝 vue