vue3環境搭建以及創建簡單項目。


1.環境准備,以下都是我的版本。自己在官網上面下載需要的版本。

嘗試了Python3.7.3在創建vue3項目時出現問題。

node.js10.16.0,

python2.7.16,

yarn1.16.0,

VSCode1.35.0

2.VSCode中安裝插件。

(英文好的跳過第一步)

(1)Chinese Simplified Language,完成之后Ctrl+Shift+p,出現搜索框,錄入Configure Display Language,選擇zh-cn,然后重啟VSCode.

(2)Beautify、ESLint、TSLint、Vetur、Path Autocomplete、

GitLens、Todo Tree、Bracket Pair Colorrizer 2、Material Icon Theme(根據需要安裝)

3.配置插件

點擊左下角,選擇設置,上方直接搜索files,Files:Auto Save 選擇onFocusChange,

清空剛才錄入的files,在擴展中找到ESLint,勾選Auto Fix on save.在這一行的下面找到setting.json,編輯該文件

"eslint.validate": [ "javascript",{ "language": "vue", "autoFix": true },"html", "vue" ],
"path-autocomplete.pathMappings": { "@":"${folder}/src" }

將以上內容寫入json文件。配置完成

 

4.命令行窗口執行 yarn global add @vue/cli,需要等待一段時間,安裝完成之后執行 vue --version,看到的版本在3.0以上即可。

(查看一下vue-cli是干啥的)

5.搭建項目。

選擇你想要放置vue3項目的一個目錄,進入該目錄下的cmd黑窗口,執行vue create porjectName(項目名稱)

如果之前沒有創建過vue3的項目,沒有保存過之前創建項目時的一個選項。

會看到兩個選項,接下來是我自己的配置(根據自己的需要來選擇)

(1)Manually select features,

(2)勾選babel 、router 、vuex 、css pre-processors、 linter/Formatter

(3)use history mode for router ? no

(4)css pre-processors 選擇了sass/scss with node-sass

(5)eslint   選擇了standard config

(6)lint features 選擇了lint on save

(7)placing config     In dedicated config files

  (8)   save this as a preset for future projects?     yes(保存這些設置,接下來創建項目時直接在第一步選擇)

(9)save preset as:myPreset

等待創建完成,會出現兩行特別醒目的文字:

cd projectName(你的項目名字)

yarn serve(啟動運行項目)

6.啟動項目。執行yarn serve

啟動成功之后會看到

 -Local :http://localhost:port/

 -Network : http://ip:port/

注意:端口號默認都是8080,如果8080端口已經被占用,會自動分配8081.

7.校驗自己的成果。

在瀏覽器中錄入上面任意一個location,都可以看到一個Vue的helloworld頁面。

 


免責聲明!

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



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