安装node.js后进行的操作（配置node环境变量、npm镜像加速、安装vue-cli项目脚手架、在IDEA中打开并运行脚手架、安装ElementPlus、新建路由）
目录
安装node.js后进行的操作（配置node环境变量、npm镜像加速、安装vue-cli项目脚手架、在IDEA中打开并运行脚手架、安装ElementPlus、新建路由）一、配置node的环境变量二、npm镜像加速配置三、vue-cli项目脚手架的安装3.1 全局安装3.2 查看版本/是否安装成功3.3 使用vue ui创建项目脚手架3.4 项目仪表盘3.4.1 仪表盘3.4.2 安装axios的依赖
四、在IDEA中打开并运行创建好的项目脚手架项目结构说明禁用IDEA的严格语法启动项目方式一（命令行）启动项目方式二（Shell脚本）
五、安装ElementPlus5.1 图形界面的方式安装5.2 命令行的方式安装5.3 引入ElementPlus 并 修改main.js5.4 解决vue3 使用Element Plus ＜script lang=“ts“ setup＞加上lang=“ts“后编译错误的坑
六、新建路由
一、配置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
三、vue-cli项目脚手架的安装
vue-cli安装
3.1 全局安装
win+R输入cmd在DOS窗口中输入以下命令：
npm install -g @vue/cli
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
看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')
在执行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')
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组件
相关阅读
发表评论