一,環境安裝
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