一,環境安裝
1:Vue項目一切基於Node.js,必須先安裝NodeJS, 下載地址:https://nodejs.org/zh-cn/

輸入 node -v 和 npm -v 得到版本信息證明裝好了。

2:確認Visual Studio 2019環境:看擴展工具里有沒有勾選NodeJs


二,使用VS2019 創建Vue項目
后期會新增多個vue的項目,所以建議加一個vue名稱 方案管理文件


右鍵項目名:選擇“在此處打開命令提示符”

運行npm的指令 npm install -g(這個指令會把你項目缺失的組件包全部補全)。
npm install --global vue-cli cnpm --registry=https://registry.npm.taobao.org
cnpm install

然后結束后再運行指令npm run serve(這是開發環境調試用的指令,能夠在修改頁面后自動刷新同步網頁)
npm run serve

瀏覽器地址 輸入 http://localhost:8081/ 可訪問到

命令行工具創建Vue:
vue init webpack vue_demo ? Project name vue_demo ? Project description A Vue.js project ? Author 315360007 <315360007@qq.com> ? Vue build standalone ? Install vue-router? No ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Set up unit tests No ? Setup e2e tests with Nightwatch? No ? Should we run `npm install` for you after the project has been created? (recommended) npm vue-cli · Generated "vue_demo".
選擇第一項npm,自動下載

選擇第三項手動下載: 進入目錄,npm install

Vue運行開發環境,現在在內存中打包,然后瀏覽器輸入:http://localhost:8080/

npm run dev


注意:下面的data屬性只能寫函數,不能寫成對象

.vue文件默認寫法:

.js文件默認寫法:


項目打包:npm run build

dist目錄是打包之后生成出來的文件夾

項目發布:
npm install -g serve
serve dist



