基於node環境vue腳手架安裝使用運行vue框架


在使用VScode時可以安裝以下這些插件:Vetur(virtual dom)、vue、Vue 3 Snippets,輔助代碼編寫

1.腳手架是可以實現快速搭建開發平台的一個命令;

包含着框架集成、實現代碼編譯、實現開發服務器的功能

vue腳手架(名字:vue-cli、@vue/cli@4--常用該腳手架第四版本)

基於webpack(webpack是一個框架構建的一個平台和gulp打包項目類似)開發的一個快速搭建Vue開發框架的一個工具

2.全局安裝

cnpm i -g @vue/cli@4

版本號可以指定沒有時是默認最新版本

vue腳手架有對電腦系統級別要求,否則不能運行腳手架

在安裝出現net error,downloading file error時,是網絡問題需要將電腦網絡等調試好再重新安裝

推薦使用cnpm安裝,不使用npm使用可能會導致node平台破壞,運行不了node使用出現問題

3.卸載vue腳手架:

npm uninstall -g vue-cli
yarn global remove vue-cli

3.0版本前后

npm uninstall -g @vue/cli
yarn global remove @vue/cli

4.查看所有版本號:
npm view vue-cli versions - -json
5.創建項目文件名
執行項目文件夾執行下載框架文件

使用步驟:vue -h

創建vue開發框架項目名

create <app-name>

create a new project powered by vue-cli-service 創建基於vue-cli-service新項目

調用:vue create empty-vue

項目名 根據項目來定,不能使用中文,還有文件的路徑不能用中文也不能有空格,否則電腦或自動報錯

初始化項目:ESLint

檢查代碼質量的一個工具庫,也是框架應該並且必須需要的一個庫,

因為代碼以后在執行提交或則code review(代碼評審--code QC)的時候會有自動代碼檢查執行機制

 

6.基於vue框架下載項目:
vue create 項目名

1.Manually select features
2.Choose Vue version 2.x
3.ESLint+Standard config
4.Lint on save
5.In dedicated config files
6.等待項目初始化--github下載vue框架,webpack工具依賴全部安裝本地即可完成,根據ip地址訪問vue首頁

 

腳手架運行是使用webpack-dev-server實現,基於express框架構架的開發服務器

腳手架是指開發框架會自動編譯項目的代碼,將代碼掛載index.html頁面


免責聲明!

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



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