配置電腦node環境
前往 node.js 安裝 電腦對應版本的node Node.js
下載 長期支持版，用的人多，應該穩定吧
安裝好后 ，windows，進入cmd 輸入 node -v 驗證是否安裝成功,Linux 則打開終端輸入 node -v
輸入 node -v后會出現 安裝的node版本號,安裝成功
配置淘寶鏡像：
解決國內的網絡連接npm速度較慢，甚至很多東西都無法下載安裝。安裝 淘寶國內鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org
之后 npm install 命令 更改為 cnpm install
配置VUE 腳手架環境以及配置VUE項目
配置 腳手架環境：
安裝node.js后
在cmd或者vscode打開終端
安裝腳手架: cnpm install -g vue-cli 或者 npm install -g vue-cli
安裝 webpack(打包js的工具): cnpm install -g webpack 或者 npm install -g webpack
以上操作 是 只需要配置一次安裝一次即可
創建VUE
選擇一個文件夾創建vue項目,CMD或者VSCode 終端 ;
輸入: vue init webpack 項目名 ，然后回車回車到底創建VUE項目;
運行項目: 先cd到項目文件夾，然后輸入以下指令 npm run dev 啟動;
npm run dev 啟動
npm run build 編譯項目 得到 dist文件夾，復制到tomcat webpack,或者Nginx 安裝文件夾中部署
Ctrl + c 輸入y 停止項目,輸入n 取消
安裝開發所可能會需要用到的依賴:
安裝 VUEX
cnpm install vuex --save 或者 npm install vuex --save
安裝axios
cnpm install axios --save 或者 npm install axios --save
安裝 sass
/*sass sass-loader依賴於node-sass 所以一並安裝*/
這里使用的是淘寶鏡像 cnpm 安裝 沒有安裝淘寶鏡像的話 使用 npm
cnpm install sass --save-dev
cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev
如果 sass報錯: ** Invalid options object. Sass Loader has been initialized using an options obj**
卸載 sass-loader和node-sass 換一個版本安裝
cnpm uninstall sass-loader
cnpm uninstall node-sass
cnpm install node-sass@4.13.1 --save-dev
cnpm install sass-loader@7.1.0 --save-dev
cnpm install XXXX --save 安裝的依賴都會在 package.json > dependencies中
cnpm install XXXX --save-dev 安裝的依賴都會在 package.json > devDependencies中
VSCode 配置
1、安裝中文簡體VSCode插件,插件庫搜索Chinese 安裝第一個
2.1、配置快速創建VUE模版,插件庫中搜索 Vetur，讓VSCode可以識別VUE代碼
2.2、文件-->首選項-->用戶代碼片段-->點擊新建代碼片段--取名vue.json 確定
2.3、輸入 vue.json回車,將模版復制進去
{
"Print to console": {
"prefix": "vue",
"body": [
"<!-- $1 -->",
"<template>",
"<div class='$2'>$5</div>",
"</template>",
"",
"<script>",
"//這里可以導入其他文件（比如：組件，工具js，第三方插件js，json文件，圖片文件等等）",
"//例如：import 《組件名稱》 from '《組件路徑》';",
"",
"export default {",
"//import引入的組件需要注入到對象中才能使用",
"components: {},",
"data() {",
"//這里存放數據",
"return {",
"",
"};",
"},",
"//監聽屬性 類似於data概念",
"computed: {},",
"//監控data中的數據變化",
"watch: {},",
"//方法集合",
"methods: {",
"",
"},",
"//生命周期 - 創建完成（可以訪問當前this實例）",
"created() {",
"",
"},",
"//生命周期 - 掛載完成（可以訪問DOM元素）",
"mounted() {",
"",
"},",
"beforeCreate() {}, //生命周期 - 創建之前",
"beforeMount() {}, //生命周期 - 掛載之前",
"beforeUpdate() {}, //生命周期 - 更新之前",
"updated() {}, //生命周期 - 更新之后",
"beforeDestroy() {}, //生命周期 - 銷毀之前",
"destroyed() {}, //生命周期 - 銷毀完成",
"activated() {}, //如果頁面有keep-alive緩存功能，這個函數會觸發",
"}",
"</script>",
"<style lang='scss' scoped>",
"/**scoped 表示樣式只在當前組件有效*/",
"//@import url($3); 引入公共css類",
"$4",
"</style>"
],
"description": "Log output to console"
}
}
2.4、效果圖
2.5、使用，新建一個vue文件，輸入 vue指令回車
3、 安裝VUE語法提示插件,插件庫搜索VUE
大功告成