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

VSCode 設置 vue 文件快速模板

就類似在vscode里面新建 Xxx.html 文件, 然后 按 tab鍵會快速插入預定義模板一樣

入口

參考

 Vue安裝module即install 命令 參數 --save --dev 作用說明

 --save   安裝運行依賴module,將模塊安裝到項目目錄下，效果是會在package文件的dependencies節點寫入依賴。

 --dev    安裝開發依賴module,將模塊安裝到項目目錄下，效果是會在package文件的evDependencies節點寫入依賴。

兩個參數可以同時使用  --save-dev 

例:  npm install --save vuex 

Vue項目編譯

 npm run build prod  生成輸出文件 project\dist  project表示當前項目

  npm run build:prod 

Vue插件備忘