vue cli3 搭建vue开发环境

一、Window 搭建Vue开发环境

操作系统：Window

Node：12.18.4 长期支持版
Vue.js：2.0

vue-cli: 3.0 版本

---

二、安装工具：

2.1 安装Node软件

   2.1.1 下载Node.js，网址： https://nodejs.org/zh-cn/

 2.1.2 安装Node.js，点击下载好的软件直接双击安装

 2.1.3 查看安装Node.js

#查看是否安装成功
C:\Users\Administrator>node --version
v12.18.4

C:\Users\Administrator>

 

2.2、安装vue-cli软件

   2.2.1  安装vue-cli3版本

C:\Users\Administrator>npm install -g @vue/cli
npm WARN deprecated @hapi/joi@15.1.1: joi is leaving the @hapi organization and
moving back to 'joi' (https://github.com/sideway/joi/issues/2411)
npm WARN deprecated request@2.88.2: request has been deprecated, see https://git
hub.com/request/request/issues/3142
npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no
 longer supported or maintained
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no
 longer supported or maintained
npm WARN deprecated @hapi/address@2.1.4: This version has been deprecated and is
 no longer supported or maintained
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is
no longer supported or maintained
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprec
ated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#dep
recated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade
to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and coul
d be using insecure binaries. Upgrade to fsevents 2.

> yarn@1.22.10 preinstall C:\Users\Administrator\AppData\Roaming\npm\node_module
s\@vue\cli\node_modules\yarn
> :; (node ./preinstall.js > /dev/null 2>&1 || true)

C:\Users\Administrator\AppData\Roaming\npm\vue -> C:\Users\Administrator\AppData
\Roaming\npm\node_modules\@vue\cli\bin\vue.js

> core-js@3.6.5 postinstall C:\Users\Administrator\AppData\Roaming\npm\node_modu
les\@vue\cli\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfill
ing JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Colle
ctive 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 goo
d job -)


> @apollo/protobufjs@1.0.5 postinstall C:\Users\Administrator\AppData\Roaming\np
m\node_modules\@vue\cli\node_modules\@apollo\protobufjs
> node scripts/postinstall


> nodemon@1.19.4 postinstall C:\Users\Administrator\AppData\Roaming\npm\node_mod
ules\@vue\cli\node_modules\nodemon
> node bin/postinstall || exit 0

Love nodemon? You can now support the project via the open collective:
 > https://opencollective.com/nodemon/donate


> ejs@2.7.4 postinstall C:\Users\Administrator\AppData\Roaming\npm\node_modules\
@vue\cli\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https:/
/jakejs.com/)

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\@v
ue\cli\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"
})
npm WARN @vue/compiler-sfc@3.0.0 requires a peer of vue@3.0.0 but none is instal
led. You must install peer dependencies yourself.

+ @vue/cli@4.5.6
added 1316 packages from 701 contributors in 390.056s

C:\Users\Administrator>

2.2.2 查看版本

C:\Users\Administrator>vue -V
@vue/cli 4.5.6

---

三、创建工程：

3.1 创建目录E:\vue-workspace

C:\Users\Administrator>md E:\vue-workspace

C:\Users\Administrator>

3.2 进入创建的目录

C:\Users\Administrator>E:

E:\>cd vue-workspace

3.3 初始化工程，选择Vue2

E:\vue-workspace>vue create test
?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? Yes

Vue CLI v4.5.6
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

#选择Vue2，回车

Vue CLI v4.5.6
? Please pick a preset: Default ([Vue 2] babel, eslint)


Vue CLI v4.5.6
✨  Creating project in E:\vue-workspace\test.
⚙️  Installing CLI plugins. This might take a while...


> yorkie@2.0.0 install E:\vue-workspace\test\node_modules\yorkie
> node bin/install.js

setting up Git hooks
can't find .git directory, skipping Git hooks installation

> core-js@3.6.5 postinstall E:\vue-workspace\test\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> ejs@2.7.4 postinstall E:\vue-workspace\test\node_modules\ejs
> node ./postinstall.js

added 1249 packages from 918 contributors in 127.373s

54 packages are looking for funding
  run `npm fund` for details

�  Invoking generators...
�  Installing additional dependencies...

added 53 packages from 36 contributors in 30.622s

58 packages are looking for funding
  run `npm fund` for details

⚓  Running completion hooks...

�  Generating README.md...

�  Successfully created project test.
�  Get started with the following commands:

 $ cd test
 $ npm run serve

3.4 起动项目

E:\vue-workspace>cd test

E:\vue-workspace\test>npm run serve

> test@0.1.0 serve E:\vue-workspace\test
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 10185ms                       11:10:14 ├F10: AM
┤


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://10.10.2.3:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

3.5 浏览访问

3.5 项目的目录结构

 

---

四、卸载vue cli3：

npm uninstall -g @vue/cli