【个人学习】: Vue项目环境搭建

最近入坑vue. ，发现不知如何运行GitHub上的开源项目，很尴尬。通过查阅资料，成功搭建好项目环境，因此将环境搭建过程分享给大家。

一、相关环境

• VSCode(开发环境)　
• node.js环境（npm包管理器）
• vue-cli 脚手架构建工具
• cnpm  npm的淘宝镜像（由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有可能需要npm的国内镜像---cnpm）我没装

二、环境安装

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