【我的學習】: Vue項目環境搭建

最近入坑vue. ，發現不知如何運行GitHub上的開源項目，很尷尬。經過查閱資料，成功搭建好項目環境，所以將環境搭建過程分享給你們。

1、相關環境

• VSCode(開發環境)　
• node.js環境（npm包管理器）
• vue-cli 腳手架構建工具
• cnpm  npm的淘寶鏡像（因爲有些npm有些資源被屏蔽或者是國外資源的緣由，常常會致使用npm安裝依賴包的時候失敗，全部可能須要npm的國內鏡像---cnpm）我沒裝

2、環境安裝

1. 安裝VSCode：https://code.visualstudio.com/下載並安裝VSCode，安裝過程很簡單，一路「下一步」就能夠了（傻瓜式安裝）漢化步驟：EXTENSIONS搜索Chinese (Simplified) Language Pack for Visual Studio Code並安裝  ---> shift+ctrl+p 搜索Configure Display Language並點擊選擇zh-cn
   
   
2. 安裝Node.js ： https://nodejs.org/en/下載並安裝node，安裝過程很簡單，一路「下一步」就能夠了（傻瓜式安裝），安裝完成以後輸入node -v查看版本，node自帶npm能夠經過npm -v 查看，以下，說明安裝成功：

　　　

　　  3.安裝vue-cli腳手架構建工具 ：

　　　在命令行中運行命令  npm install -g vue-cli ，而後等待安裝完成。(注意，這裏建議使用cnpm來替代npm，否則速度超級慢，會致使卡在那)，我沒卡

　　  4.新建vue項目（依賴包會自動安裝）：打開vscode，ctrl+` 打開終端，切到要新建項目的目錄，cd d:\vs2019Project\Study.Vue\study.vuejs 以後運行vue init webpack study.vuejs（這個命令的意思是初始化一個項目，其中webpack是構建工具，也就是整個項目是基於webpack的。其中study.vuejs是整個項目文件夾的名稱，這個文件夾會自動生成在你指定的目錄中），運行初始化命令的時候會讓用戶輸入幾個基本的選項，如項目名稱，描述，做者等信息，若是不想填直接回車默認就好。

D:\vs2019Project\Study.Vue>vue init webpack study.vuejs

? Project name yes ? Project description yes ? Author yes ? Vue build (Use arrow keys) ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Set up unit tests Yes ? Pick a test runner jest ? Setup e2e tests with Nightwatch? Yes ? Should we run `npm install` for you after the project has been created? (recommended) npm vue-cli · Generated "study.vuejs". # Installing project dependencies ... # ========================  npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools. npm WARN deprecated core-js@2.6.10: core-js@<3.0 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3. npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features! npm WARN deprecated json3@3.3.2: Please use the native JSON object instead of JSON 3 npm WARN deprecated fsevents@1.2.9: One of your dependencies needs to upgrade to fsevents v2: 1) Proper nodejs v10+ support 2) No more fetching binaries from AWS, smaller package size npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools. npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor. npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0 npm WARN deprecated left-pad@1.3.0: use String.prototype.padStart() [ ......] / refresh-package-json:is-descriptor: sill refresh-package-json D:\vs2019Project\Study.Vue\study.vuejs\node_modules\jest-leak-det > chromedriver@2.46.0 install D:\vs2019Project\Study.Vue\study.vuejs\node_modules\chromedriver > node install.js Current existing ChromeDriver binary is unavailable, proceding with download and extraction. Downloading from file: https://chromedriver.storage.googleapis.com/2.46/chromedriver_win32.zip Saving to file: C:\Users\HRSY-ZJ\AppData\Local\Temp\2.46\chromedriver\chromedriver_win32.zip Received 782K... Received 1573K... Received 2355K... Received 3137K... Received 3920K... Received 4523K total. Extracting zip contents Copying to target path D:\vs2019Project\Study.Vue\study.vuejs\node_modules\chromedriver\lib\chromedriver Done. ChromeDriver binary available at D:\vs2019Project\Study.Vue\study.vuejs\node_modules\chromedriver\lib\chromedriver\chromedriver.exe > core-js@2.6.10 postinstall D:\vs2019Project\Study.Vue\study.vuejs\node_modules\core-js > node postinstall || echo "ignore" Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library! The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: > https://opencollective.com/core-js > https://www.patreon.com/zloirock Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -) > uglifyjs-webpack-plugin@0.4.6 postinstall D:\vs2019Project\Study.Vue\study.vuejs\node_modules\webpack\node_modules\uglifyjs-webpack-plugin > node lib/post_install.js npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN ajv-keywords@2.1.1 requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) added 1736 packages from 1098 contributors and audited 32263 packages in 591.972s found 90 vulnerabilities (69 low, 7 moderate, 13 high, 1 critical) run `npm audit fix` to fix them, or `npm audit` for details Running eslint --fix to comply with chosen preset rules... # ======================== > yes@1.0.0 lint D:\vs2019Project\Study.Vue\study.vuejs > eslint --ext .js,.vue src test/unit test/e2e/specs "--fix" # Project initialization finished! # ========================

 

 　　 5.項目配置：打開launch.json，配置以下：

{
    // 使用 IntelliSense 瞭解相關屬性。 
    // 懸停以查看現有屬性的描述。
    // 欲瞭解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "firefox",
            "request": "launch",
            "name": "vuejs: firefox",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
              "webpack:///src/*": "${webRoot}/*"
            }
        }
     ]
}

 

　　  6.運行項目：，運行命令 npm run dev（其中的「run」對應的是package.json文件中，scripts字段中的dev，也就是 node build/dev-server.js命令的一個快捷方式）項目運行成功後，瀏覽器會自動打開localhost:8080（若是瀏覽器沒有自動打開，能夠手動輸入）。運行成功！

D:\vs2019Project\Study.Vue\study.vuejs>npm run dev

> yes@1.0.0 dev D:\vs2019Project\Study.Vue\study.vuejs > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 13% building modules 32/38 modules 6 active ...y.vuejs\src\components\HelloWorld.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }. 95% emitting DONE Compiled successfully in 27011ms 15:49:23 I Your application is running here: http://localhost:8080