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

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

一、相关环境

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

二、环境安装

安装VSCode：https://code.visualstudio.com/下载并安装VSCode，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）汉化步骤：EXTENSIONS搜索Chinese (Simplified) Language Pack for Visual Studio Code并安装 ---> shift+ctrl+p 搜索Configure Display Language并点击选择zh-cn
安装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

posted @ 2019-11-25 17:02 敲代码使我秃了头阅读(1718) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

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

一、相关环境

二、环境安装

公告