安装node.js后进行的操作（配置node环境变量、npm镜像加速、安装vue-cli项目脚手架、在IDEA中打开并运行脚手架）

安装node.js后进行的操作（配置node环境变量、npm镜像加速、安装vue-cli项目脚手架、在IDEA中打开并运行脚手架、安装ElementPlus、新建路由）

一、配置node的环境变量

1.复制node,js的安装路径

或者配置下面的
2.右击此电脑点击属性
3.点击高级系统设置

4.点击环境变量
找到Path路径->点编辑->粘贴复制好的node.js的安装路径
就可以了.
或者下面也行:
新建NODE_HOME环境变量
变量值为node.js的安装路径

在Path环境变量中引入NODE_HOME环境变量即可
测试环境变量是否生效
win+R键输入cmd打开DOS窗口，输入node -v即可

二、npm镜像加速配置

win+R键输入cmd打开DOS窗口，输入以下指令即可

npm config set registry https://registry.npm.taobao.org
1

三、vue-cli项目脚手架的安装

vue-cli安装

3.1 全局安装

win+R输入cmd在DOS窗口中输入以下命令：

 npm install -g @vue/cli
1

3.2 查看版本/是否安装成功

在DOS窗口下输入vue -V命令

3.3 使用vue ui创建项目脚手架

命令启动图型化界面

在浏览器访问localhost:8000，注意：并在弹出的页面按住Ctrl+鼠标的滑轮键
并按如下顺序点击按钮

界面效果

指定脚手架项目安装路径 => 点击在此创建新项目
选择项目文件夹
包管理器选择npm
去掉勾选Git => 点击下一步

选择手动的方式，自定义配置项目
选择手动 => 下一步
勾选Router、Vuex、CSS 并 取消勾选 Linter/Formatter> 点击下一步Stylus选择Stylus => 创建项目
点击 创建项目，不保存预设

3.4 项目仪表盘

3.4.1 仪表盘

3.4.2 安装axios的依赖

安装依赖的本质 就是执行了一个 npm install --save-dev axios
这个东东是用来发网络请求的

按下图的顺序依次点击

四、在IDEA中打开并运行创建好的项目脚手架

将创建好的项目脚手架拖拽到IDEA中即可

项目结构说明

禁用IDEA的严格语法

启动项目方式一（命令行）

在IDEA中找到Terminal终端，输入npm install
在输入npm run serve运行

启动项目方式二（Shell脚本）

点击Add Configuration



点击运行按钮启动

出现如下界面说明运行成功

打开浏览器访问localhost:8080说明脚手架搭建成功

五、安装ElementPlus

5.1 图形界面的方式安装

、脚手架搭建好之后，点击依赖–>点击安装依赖

按顺序依次点击

看5.3

5.2 命令行的方式安装

ElementPlus官网（基于Vue3.x）：https://element-plus.gitee.io/zh-CN/
点击指南


将框出来的命令，复制到脚手架的Terminal中运行

命令如下：

npm install element-plus --save
1

看5.3

5.3 引入ElementPlus 并 修改main.js

引入ElementPlus
点击快速开始，在脚手架main.js中引入ElementPlus

将框选的代码复制到脚手架项目main.js中，并修改main.js的代码
原来maIn.js的代码如下：

main.js代码如下

修改后的main.js代码如下：
第一种修改方式：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)

app.use(store).use(router).mount('#app')
1
2
3
4
5
6
7
8
9
10
11

在执行npm install和npm run serve命令

第二种修改方式：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(store).use(router).use(ElementPlus).mount('#app')

1
2
3
4
5
6
7
8
9
10
11

5.4 解决vue3 使用Element Plus ＜script lang=“ts“ setup＞加上lang=“ts“后编译错误的坑

请参考我的另一篇博客——《vue3 使用Element Plus ＜script lang=“ts“ setup＞加上lang=“ts“后编译错误》
博客链接：https://huanghaoheng.blog.csdn.net/article/details/126923589

六、新建路由

1.在App.vue中注册路由组件

2.在router文件夹下的index,js里面配置路由表中路由和其对应的组件View视图

3.在views里面创建TestView

4.在components中创建TestWorld组件

5.在TestView里面引入TestWorld组件