vueJs初探-創建第一個vue項目

***日常筆記***

1.所需模塊：

--①Node.js：JavaScript運行環境

--②npm：Nodejs下的包管理器，這里推薦各個大神使用的淘寶NPM鏡像進行安裝（http://npm.taobao.org/）

--③webpack：JavaScript 應用程序的靜態模塊打包器(module bundler)

--④vue-cli：用戶生成Vue工程模板

2.安裝Node.js：https://nodejs.org/en/

--驗證安裝成功：node -v

3.安裝cnpm：npm install -g cnpm -regitstry=https://registry.npm.taobao.org

4.安裝vue-cli：npm install -g vue-cli

5.創建一個文件夾，在文件夾下打開PowerShell模式：創建vuejs項目

--vue init webpack 項目名字

--在安裝時會詢問你: 

①Project name (sanfeng1);項目名稱(sanfeng1)。(確定按enter,否按N) 

②. Project description (A Vue.js project);項目描述(一vue.js項目)。(隨意輸入一段簡短介紹,用英文) 

③.Author (sunsanfeng);作者(sunsanfeng)。(確定按enter,否按N) 

④.Vue build (Use arrow keys)> Runtime + Compiler: recommended for most usersRuntime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere;Vue公司的建立(使用箭頭鍵)>運行時+編譯器:大多數用戶推薦運行時間:約6kb輕民+ gzip,但模板(或任何Vue具體HTML)只允許在。VUE文件渲染功能是必需的其他地方。(按enter) 

⑤.Install vue-router? (Y/n);安裝的路由?(/ N)。(可安可不安,以后也可以再安,根據需求選擇) 

⑥.Use ESLint to lint your code? (Y/n);使用ESlint語法?(Y/ N)。(使用ESLint語法,如果不懂ESLint語法,,建議N) 

⑦.Setup unit tests with Karma + Mocha? (Y/n);設置單元測試?(Y / N)。(選N) 

⑧.Setup e2e tests with Nightwatch? (Y/n);Nightwatch建立端到端的測試?(Y / N)。(選N)

--在對應的文件夾就能看到生成的項目

6.使用vscode打開vuejs項目

7.安裝對應的依賴

--cnpm instal

8.編譯運行項目：如沒有自動打開瀏覽器，手動輸入地址： http://localhost:8080，成功運行科看到vuejs頁面

--npm run dev

9.附錄：

--1.查看依賴：package.json

--2.webpake配置說明：https://webpack.css88.com/

--3.設置中添加基本的配置：具體配置看個人喜好

{
    "css.fileExtensions": [ "css", "scss"],
     "editor.parameterHints": true,
    "workbench.iconTheme": "vscode-icons",
    "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
        "vue-html": "html",
        "vue": "html"
    },
    "debug.node.autoAttach": "off",
    //vuejs配置
    "editor.fontSize": 14,
    "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": {
        "other": true,
        "comments": true,
        "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"]
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
    "eslint.options": {
        "plugins": ["html"]
   },
    "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
  }

}