[JavaScript知识库]Windows安装vue

Vue

安装

1. 下载安装包： https://nodejs.org/en/download/ ，安装
2. cmd测试

C:\Users\w_rcss>node -v
v16.14.2

C:\Users\w_rcss>npm -v
8.5.0

2. 安装路径下创建node_global（默认安装目录）,node_cache（缓存日志目录）

安装路径：D:\Environment\node

缓存日志路径：D:\Environment\node\node_cache
默认安装路径：D:\Environment\node\node_global

cmd配置并测试

C:\Users\w_rcss>npm config set prefix "D:\Environment\node\node_global"

C:\Users\w_rcss>npm config set cache "D:\Environment\node\node_cache"

C:\Users\w_rcss>npm config get prefix
D:\Environment\node\node_global

C:\Users\w_rcss>npm config get cache
D:\Environment\node\node_cache

3. 配置环境变量

系统变量：
NODE_PATH : D:\Environment\node\node_modules
D:\Environment\node\

用户变量：
D:\Environment\node\node_global

4. 配置tb镜像

# 查看npm下载源
C:\Users\w_rcss>npm config get registry
https://registry.npm.taobao.org/


# 安装cnpm
C:\Users\w_rcss>npm install -g cnpm --registry=https://registry.npm.taobao.org
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.

added 388 packages in 39s
npm notice
npm notice New patch version of npm available! 8.5.0 -> 8.5.5
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.5.5
npm notice Run npm install -g npm@8.5.5 to update!
npm notice


# 测试cnpm使用cnpm config get registry或cnpm config list
# 在global目录下测试cnpm，cnpm没有配置环境变量
D:\Environment\node\node_global>cnpm config get registry
https://registry.npmmirror.com/

D:\Environment\node\node_global>cnpm config list
; cli configs
disturl = "https://npmmirror.com/mirrors/node"
metrics-registry = "https://registry.npmmirror.com/"
registry = "https://registry.npmmirror.com/"
scope = ""
user-agent = "npm/6.14.16 node/v16.14.2 win32 x64"
userconfig = "C:\\Users\\w_rcss\\.cnpmrc"

; node bin location = D:\Environment\node\node.exe
; cwd = D:\Environment\node\node_global
; HOME = C:\Users\w_rcss
; "npm config ls -l" to show all defaults.

D:\Environment\node\node_global>cnpm config get registry
https://registry.npmmirror.com/

5. 安装vue

# -g表示全局安装，安装到global目录
D:\Environment\node\node_global>npm install vue -g

added 21 packages in 4s

D:\Environment\node\node_global>npm info vue

vue@3.2.31 | MIT | deps: 5 | versions: 370
The progressive JavaScript framework for building modern web UI.
https://github.com/vuejs/core/tree/main/packages/vue#readme

dist
.tarball: https://registry.npmmirror.com/vue/-/vue-3.2.31.tgz
.shasum: e0c49924335e9f188352816788a4cca10f817ce6
.integrity: sha512-odT3W2tcffTiQCy57nOT93INw1auq5lYLLYtWpPYQQYQOOdHiqFct9Xhna6GJ+pJQaF67yZABraH47oywkJgFw==
.unpackedSize: 2.5 MB

dependencies:
@vue/compiler-dom: 3.2.31    @vue/runtime-dom: 3.2.31     @vue/shared: 3.2.31
@vue/compiler-sfc: 3.2.31    @vue/server-renderer: 3.2.31

maintainers:
- posva <posva13@gmail.com>
- yyx990803 <yyx990803@gmail.com>

dist-tags:
csp: 1.0.28-csp  latest: 3.2.31   legacy: 2.6.14   next: 3.2.31

published a month ago by yyx990803 <yyx990803@gmail.com>

6. 安装webpack

# 安装webpack
D:\Environment\node\node_global>npm install webpack -g

added 71 packages in 8s

# 安装cli（4X版本命令放在cli中）
D:\Environment\node\node_global>npm install --global webpack-cli

added 120 packages in 9s

# 测试
D:\Environment\node\node_global>webpack -v
webpack: 5.70.0
webpack-cli: 4.9.2
webpack-dev-server not installed

7. 安装脚手架vue-cli 2.x

# 执行install vue-cli -g完成安装
D:\Environment\node\node_global>npm install vue-cli -g
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli

added 245 packages in 19s

# 查看vue版本，v要大写
D:\Environment\node\node_global>vue -V
2.9.6

# 安装vue-router
D:\Environment\node\node_global>npm install -g vue-router

added 23 packages in 2s

8. 创建vue项目测试

D:\Environment\git\gitRepository163\vue-test>vue init webpack my_vue

? Project name my_vue
? Project description test
? Author rcss
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

• vue build有两种模式，runtime+compiler vs runtime-only
  • runtime-only更轻，更快，性能更好，只识别render函数，不识别tempalte
  • 如果要使用template，选择runtime+compiler
  • 使用.vue文件开发，runtime——only性能更好
• vue-router 路由一定要安装
• eslint监测代码，非必要不安装，n
• unit test 单元测试，能省则省，n
• ese 端到端测试工具，n
• 选择第一项，npm依赖

D:\Environment\git\gitRepository163\vue-test>cd my_vue

D:\Environment\git\gitRepository163\vue-test\my_vue>npm run dev

> my_vue@1.0.0 dev
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

(node:12668) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
 13% building modules 27/31 modules 4 active ...sitory163\vue-test\my_vue\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "bab 95% emitting

 DONE  Compiled successfully in 3520ms                                                                          16:01:51

 I  Your application is running here: http://localhost:8080

测试： http://localhost:8080

至此，vue安装完成！