Visual Studio 2019&WebStorm&CMD 創建vue項目


一,環境安裝

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

 

 

 

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM