vue環境搭建、新建項目以及編輯器vscode安裝

一、vue開發環境搭建

1、安裝nodejs
步驟：在node官網(https://nodejs.org/en/download/ )選擇跟自己的電腦匹配的版本進行下載，然後一步步的安裝即可，在cmd控制檯輸入node -v，如果出現版本信息即表示安裝成功。

2、npm包管理器是集成在node中的，所以直接輸入npm -v 就能查看到版本信息，若出現版本信息則表示npm能正常使用。

3、輸入npm install -g cnpm --registry=http://registry.npm.taobao.org ，通過淘寶鏡像安裝相關依賴。

4、安裝vue-cli腳手架構建工具，輸入命令 npm install -g vue-cli ，安裝完成即可。

二、新建vue項目

1、進入到vue項目要放置的路徑下（例如desktop），新建vue項目，指令 vue init webpack +項目名稱.
例如:執行指令 vue init webpack firstvue ,則會在當前(desktop)路徑下創建一個名爲firstvue的文件夾，這個文件夾就是新建的vue項目，執行上述命令後，這個項目的相關文件都會在firstvue這個文件夾下自動生成。

2、上一步之後就會開始新建項目，詢問項目的相關配置。一路yes省事兒沒啥問題

3、進入到項目的文件夾(firstvue)下，

   $ \desktop> cd firstvue
    $ \desktop\firstvue> 

4、運行項目，指令 npm run dev ,正常情況下會輸出 Your application is running here: http://localhost:8081

$ \desktop\firstvue> npm run dev

5、在瀏覽器中打開 http://localhost:8081，能看到vue的大logo圖片。

至此，vue項目新建完畢！

三、安裝配置vscode

1.Visual Studio Code編輯器在Windows上安裝比較簡單，直接setup.exe。安裝好後首次啓動配置插件，插件配置必須聯網，從網上下載。如下圖點擊左側擴展：

2.配置
文件->首選項->設置

{
    "workbench.iconTheme": "vscode-icons",
    "editor.fontSize": 20,
    "editor.renderIndentGuides": false,
    "files.autoSave": "afterDelay",
    "liveSassCompile.settings.formats":[
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/css"
        },
        {
            "extensionName": ".min.css",
            "format": "compressed",
            "savePath": "/css"
        }
    ],
    "liveSassCompile.settings.excludeList": [
       "**/node_modules/**",
       ".vscode/**"
    ],
    "liveSassCompile.settings.generateMap": true,
    "easysass.formats": [
        {
            "format": "expanded",
            "extension": ".css"
        },
        {
            "format": "compressed",
            "extension": ".min.css"
        }
    ],
    "easysass.targetDir": "./css/",
    "background.customImages": [
        "file:///D://222.png"
    ],
    "background.useDefault": false,
    "background.style": {
        "content": "''",
        "pointer-events": "none",
        "position": "absolute",
        "z-index": "99999",
        "width": "102%",
        "height": "100%",
        "background-position": "0%",
        "background-repeat": "no-repeat",
        "opacity": 0.3
    },
    "editor.quickSuggestions": {
        "strings": true
    },
    "cssrem.rootFontSize": 12,
    "cssrem.autoRemovePrefixZero": false,
    "cssrem.fixedDigits": 3,
    "beautify.language": {
        "js": {
            "type": [
                "javascript",
                "json"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautify"
            ]
        },
        "css": [
            "css",
            "scss"
        ],
        "html": [
            "htm",
            "vue",
            "html"
            
        ]
    },
    "workbench.colorTheme": "Dark-Dracula",
    "vetur.format.defaultFormatter.html": "js-beautify-html"
    // "emmet.syntaxProfiles":{
    //     "vue-html":"html",
    //     "vue":"html"
    // },
    // "files.associations": {
    //     "*.vue":"html"
    // },
    // "eslint.validate":["javascript","javascriptreact","html"]
}