零基礎導入Vue項目

1、前幾天自從搭建完Vue後,能跑的通demo後,卻不知道用啥做這個開發合適,其中推薦一下Vs Code,不是很大卻很方便,需要的配置也不是很多。(Sublime Text 3 電腦不大行,我沒有裝上插件。Hbulider 也不是很好用)

Vs Code下載地址:https://code.visualstudio.com/

2、安裝(這個……幹就完事)

3、裝完了吧,英文的吧,搞不了了吧,其他先不用管,咱們先搞成中文

(1)使用快捷鍵【Ctrl+Shift+P】,在彈出的搜索框中輸入【configure language】,然後選擇搜索出來的【Configure Display Language】,如下圖:

(2)然後就打開了locale.json文件,可以看到locale的屬性值爲en,刪除locale後面的屬性直到冒號,然後重新輸入冒號會自動出現代碼提示:

(3)然後保存locale.json文件,重新啓動VSCode軟件,可以看到,並沒有變爲中文語言環境,那是應爲locale.json中的代碼配置的意思是說軟件啓動加載語言配置包爲中文,但是實際上剛剛安裝的VSCode並沒有中文語言包,所以這裏並沒有顯示爲中文語言環境。

(4)按照下圖中紅色箭頭指示位置點擊步驟1指向,然後在彈出的搜索框中輸入Chinese,然後選擇【Chinese (Simplified)Language Pack for Visual Studio Code】,然後點擊右側的【Install】:

(5)安裝好中文語言包之後軟件會提示重啓VSCode,然後就是中文的了,然後在認識的基礎上去搞定配置問題。

4、配置Vs Code

(1)Ctrl + Shit + X打開插件擴展窗口進行插件擴展,這裏要安裝兩個插件

[1] vetur插件的安裝

該插件是vue文件基本語法的高亮插件,在插件窗口中輸入vetur點擊安裝插件就行,裝好後點擊文件->首選項->設置 打開設置界面,在設置界面右側添加配置

"emmet.syntaxProfiles": {
  "vue-html": "html",
  "vue": "html"
}

[2] eslint插件的安裝

eslint智能錯誤檢測插件,在具體開發中作用很大,能夠及時的幫我們發現錯誤。至於安裝,同樣打開插件擴展窗口輸入eslint點擊安裝插件,裝好後也需要進行配置,在同vetur插件一樣的地方進行配置

"eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],

 "eslint.options": {
        "plugins": ["html"]
}

5、導入項目

文件-->打開文件夾-->選擇:

6、運行

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章