NodeJS+Vue+Element-Ui/Plus+Axios+Vue-router+vuex 详细下载、安装、创建项目、引入

一、下载安装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-router

3. 创建路由文件

在 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具体配置如下：

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 --save

3. 编写 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,

上述在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')