一、下载安装NodeJS
1.下载过程默认下一步
（1）这个是官网全版目录，下载太慢（一般下载不了）；但是它写了所有nodejs和npm相互对应的版本，可以以此为参考、防止版本不对应；
NodeJS各个历史版本下载https://nodejs.org/zh-cn/download/releases/
（2）这里有一个快速下载地址，只有16.18.1这个版本，但这个版本是长期支持的；对应npm8.15.0
NodeJS16.18.1下载地址http://nodejs.cn/download/
2. 查看版本(之前下载好的)
3. 修改缓存、依赖的的存放目录
在nodejs安装目录下，新建俩个文件：node_cache、node_global
4. 打开cmd，分别执行两条命令
npm config set cache "D:\IT\Install\nodejs\node_cache"
再继续执行两条命令，执行完成后检查是否成功！
npm config get cache
npm config get prefix
5. 配置环境变量
这个配置先不管，你先配置。等安装完vue，查看目录你就知道了！
NODE_PATH
D:\IT\Install\nodejs\node_global\node_modules
Path
D:\IT\Install\nodejs\
D:\IT\Install\nodejs\node_global
D:\IT\Install\nodejs\node_cache
6. 安装淘宝镜像
因为原镜像在国外，访问很慢；所以需要安装淘宝镜像!
#安装命令
npm config set registry https://registry.npm.taobao.org
#查询
npm config get registry
二、安装vue及vue/cli
1. 在cmd执行命令，安装vue
npm install vue -g
这个问题忽略，不用去更新！
2. 再执行安装vue/cli的命令
npm install -g @vue/cli
3. 查看vue版本
三、创建项目
1. 先找到创建项目的目录下
2. 在路径上输入cmd敲回车进入dos命令
3. 输入vue create test-vue (项目名）
vue create test-vue
4. 选择默认 Vue2 或者 Manually select features 回车
这里和大家解释一下：我们新手学习的时候最好先选择Manually select features去配置学习（这里暂时没有教程介绍，请大家找度娘解决一下应急！），像我跟着视频去学习就选择Vue2了。那下面根据教程就选择下载element-ui
若是大家很牛的话，那就选择Vue3吧！而且项目创建完毕，根据下面教程要下载的是element-plus
5. 等待项目创建
6. 启动运行项目
cd test-vue
npm run serve
7. 点击地址进入vue页面
8. 页面如下即成功
四、WebStorm创建vue项目
1. File-New-Project
2. 选择vue.js修改项目名
3. 等待项目创建
4. 项目创建完毕配置启动项
我这里配置过了，所以直接显示了！
点 + 选择 npm
配置如图两处，选择serve
5. 完成后启动即可
五、安装 element-ui
1. 在先进入项目下
PS D:\IT\Java\IdeaProjects\Liush> cd .\springboot-vue-wms\wms-web\注：我这里是在IDEA打开的
2. 安装 element-ui
PS D:\IT\Java\IdeaProjects\Liush\springboot-vue-wms\wms-web> npm i element-ui -S
3. 检验安装
查看 node——modules 下是否有 element-ui
4. 在main.js引入以下内容
参考官网：element-ui 创建-快速上手
需要拷贝内容如下
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
main.js 完整代码如下
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
render: h => h(App),
}).$mount('#app')六、安装 element-plus
1. 论述始终
原因：为什么我这里不使用指令 npm i element-ui -S 安装 element-ui 呢？
报错：安装element-ui报错解决办法
解释：如图，在上面我创建项目时候用的是默认选择Vue3，而vue3.0 不兼容 element-ui ，于是推出了element-plus
所以：我要在vue项目路径下安装element-plus，具体操作如下！
2.下载 element-plus
npm install element-plus --save
3. 在main.js中引用
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
const app = createApp(App)
app.use(ElementPlus)
app.use(router).mount('#app')
七、安装 axios
1. 首先进入项目目录下
PS D:\IT\Java\IdeaProjects\Liush> cd .\springboot-vue-wms\wms-web\2. 安装插件 axios
npm install --save axios
如果报错，请再试下面这条命令全局安装 axios
npm install axios -g
3. 在main.js 全局引入 axios
import axios from "axios";
Vue.prototype.$axios = axios;
八、安装 vue-router
Vue2的版本只能和vue-router 3.x使用，vue-router 4.x和Vue3使用，如果安装vue-router不标注版本的话，会默认安装vue-router 4.x的版本，可以在package.json文件里查看vue-router的版本信息，我的是^3.5.4的版本。
1. 首先进入项目目录下
PS D:\IT\Java\IdeaProjects\Liush> cd .\springboot-vue-wms\wms-web\2. Vue2 安装路由 vue-router
npm i vue-router@3.5.4
2. Vue3 安装路由 vue-router
npm i vue-router3. 创建路由文件
在 src 下创建 router 文件，并新建 index.js
4. 配置 index.js
首先引入路由：import VueRouter from 'vue-router'; 我的具体配置如下
import VueRouter from 'vue-router';
const routes = [
{
path: '/',
name: 'login',
component: () => import('../components/Login')
}
]
const router = new VueRouter({
mode: 'history',
routes
})
export default router;5. 在 main.js 注册
首先引入：路由和路由配置文件
import VueRouter from 'vue-router';
import router from "@/router";
还有配置就是：
Vue.use(VueRouter);
router,
上述在main.js具体配置如下：文章来源地址https://www.toymoban.com/news/detail-417422.html
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import './assets/global.css';
import axios from "axios";
import VueRouter from 'vue-router';
import router from "@/router";
Vue.prototype.$axios = axios;
Vue.prototype.$httpUrl = 'http://localhost:8090'
Vue.config.productionTip = false
// Vue.use(ElementUI);
Vue.use(VueRouter);
Vue.use(ElementUI, {size: 'small'});
new Vue({
router,
render: h => h(App),
}).$mount('#app')
九、安装 vuex 状态管理
同样，Vue2 安装 vuex 状态管理要制定版本，Vue3 则不用。
1. 首先进入项目目录下
PS D:\IT\Java\IdeaProjects\Liush> cd .\springboot-vue-wms\wms-web\2. Vue2 安装状态管理 vuex
npm i vuex@3.0.0
2. Vue3 安装状态管理 vuex
npm install vuex@next --save3. 编写 store 文件
在 src 下创建 store 文件，并新建 index.js
4. 配置 index.js
首先引入路由：
import vue from 'vue';
import Vuex from 'vuex';
vue.use(Vuex)
我的具体配置如下：
import vue from 'vue'
import Vuex from 'vuex'
import router, {resetRouter} from "../router";
vue.use(Vuex)
function addNewRoute(menuList) {
console.log(menuList)
let routes = router.options.routes
console.log(routes)
routes.forEach(routeItem => {
if (routeItem.path == "/Index") {
menuList.forEach(menu => {
let childRoute = {
path: '/' + menu.menuclick,
name: menu.menuname,
meta: {
title: menu.menuname
},
component: () => import('../components/' + menu.menucomponent)
}
routeItem.children.push(childRoute)
})
}
})
resetRouter()
router.addRoutes(routes)
}
export default new Vuex.Store({
state: {
menu: []
},
mutations: {
setMenu(state, menuList) {
state.menu = menuList
addNewRoute(menuList)
}
},
getters: {
getMenu(state) {
return state.menu
}
}
})5. 在 main.js 中注册
首先引入：sotre状态管理配置文件
import store from './store';
还有配置就是：
store,文章来源：https://www.toymoban.com/news/detail-417422.html
上述在main.js具体配置如下：
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import './assets/global.css';
import axios from "axios";
import VueRouter from 'vue-router';
import router from "@/router";
import store from './store';
Vue.prototype.$axios = axios;
Vue.prototype.$httpUrl = 'http://localhost:8090'
Vue.config.productionTip = false
// Vue.use(ElementUI);
Vue.use(VueRouter);
Vue.use(ElementUI, {size: 'small'});
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')
到了这里，关于NodeJS+Vue+Element-Ui/Plus+Axios+Vue-router+vuex 详细下载、安装、创建项目、引入的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
