【服务端看前端】VUE 安装和工程初始化

• 简介

• nodejs环境变量

• nodejs切换npm源

• 安装vue+新建工程+启动工程

简介

需要优先安装node.js；本文对应的版本：node-v18.17.1-x64

node.js作为base环境，运行和安装vue使用；

过程： 关注环境变量、关注切换源（卡住不动）

环境变量

按照下面命令设置完成后，需要进入 window【高级环境变量】里面进行配置；

• node_path 环境变量：

• node_module、node_global环境变量： 通过npm下载的包和命令都在这里（例如vue）；不设置会导致找不到vue命令

在nodes根目录直接创建catch、global目录，然后设置到npm的配置中： npm config set XX

切换npm源

不切换源，下载会卡住；有时切换了源，仍然卡住不动;截止到2023-08-29淘宝源还是可用，网上说的各种过期不可信

解法：1、先查看配置是否切换成功， 2、关闭dos或者 命令行窗口重新打开 3、关机重启（各种环境变量需要重启生效）

默认源：

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装vue+新建工程+启动工程

#安装vue
$ npm npm install -g @vue/cli
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
​
# 查看vue版本
$ vue --version
@vue/cli 5.0.8
​
# 新建工程
$ vue create  boundary-ui
? Please pick a preset: (Use arrow keys)
? Please pick a preset: Default ([Vue 2] babel, eslint)
✨  Creating project in D:\ij_vue\boundary-ui.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...
​
​
added 861 packages in 3m
🚀  Invoking generators...
📦  Installing additional dependencies...

运行

 # D:\ij_vue\boundary-ui>npm run serve
​
> boundary-ui@0.1.0 serve
> vue-cli-service serve
 DONE  Compiled successfully in 18828ms                                                                         15:55:59
​
​
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://10.43.178.5:8080/
​
  Note that the development build is not optimized.
  To create a production build, run npm run build.