VUE-CLI4.X安装和初始化VUE项目并集成ELMENTUI

VUE-CLI4.X安装和初始化VUE项目并集成ELMENTUI

node环境安装

下载并安装node.js

node.js

将node.exe文件所在路径加入到环境变量PATH中

C:\Program Files\nodejs\

检查node命令

node -v npm -v

C:\Users\haorongzhi>node -v v12.18.4

C:\Users\haorongzhi>npm -v 6.14.6

安装成功后，修改npm镜像（ ）

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

查看npm版本

cnpm -v

C:\WINDOWS\system32>cnpm -v cnpm@6.1.1 (C:\Users\haorongzhi\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js) npm@6.14.8 (C:\Users\haorongzhi\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js) node@12.18.4 (C:\Program Files\nodejs\node.exe) npminstall@3.27.0 (C:\Users\haorongzhi\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js) prefix=C:\Users\haorongzhi\AppData\Roaming\npm win32 x64 10.0.17134 registry=https://r.npm.taobao.org

VUE安装

全局安装vue

cnpm install vue -g

C:\WINDOWS\system32>cnpm install vue -g Downloading vue to C:\Users\haorongzhi\AppData\Roaming\npm\node_modules\vue_tmp Copying C:\Users\haorongzhi\AppData\Roaming\npm\node_modules\vue_tmp_vue@2.6.12@vue to C:\Users\haorongzhi\AppData\Roaming\npm\node_modules\vue Installing vue’s dependencies to C:\Users\haorongzhi\AppData\Roaming\npm\node_modules\vue/node_modules All packages installed (used 6ms(network 3ms), speed 0B/s, json 0(0B), tarball 0B

VUE-CLI 脚手架安装

全局安装vue-cli

cnpm install -g @vue/cli

如果有1.X或2.X的vue-cli，请先执行卸载操作npm uninstall vue-cli -g

查看vue版本

vue --version 或 vue -V

C:\WINDOWS\system32>vue -V @vue/cli 4.5.6

升级vue-cli

npm update -g @vue/cli

创建VUE项目

创建新项目

vue create mypoject

Vue CLI v4.5.6 ? Please pick a preset: (Use arrow keys)

Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3] babel, eslint) Manually select features

可选择安装babel和eslint

安装成功后，进入cd mypoject启动webpack服务，查看页面效果

npm run serve

DONE Compiled successfully in 5285ms 11:34:40 ├F10: AM┤

App running at:

Local: http://localhost:8080/Network: http://10.72.87.174:8080/

Note that the development build is not optimized. To create a production build, run npm run build.

登录8080端口，展示效果如下，证明VUE项目启动成功

VUE引入ElementUI

elementui安装

进入项目目录，运行如下命令

cnpm i element-ui -S

安装过程提示core-js版本小于3

deprecate element-ui@2.13.2 › async-validator@1.8.5 › babel-runtime@6.26.0 › core-js@^2.4.0 core-js@❤️ is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

升级core-js

cnpm install --save core-js@^3

重新安装eleemngtui，提示如下表示安装成功

D:\temp\xiaorenshu-ui>cnpm i element-ui -S √ Installed 1 packages √ Linked 0 latest versions √ Run 0 scripts √ All packages installed (used 261ms(network 258ms), speed 78.31kB/s, json 1(20.2kB), tarball 0B)

查看项目目录下node_modules,出现elementui目录

将elementui引入到项目中

在main.js中引入如下内容：

import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);

完整代码：

import Vue from 'vue' import App from './App.vue' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')

集成axios

axios使用参考 axios中文文档

npm安装axios

进入项目目录，执行如下命令

cnpm install axios

D:\temp\xiaorenshu-ui>cnpm install axios √ Installed 1 packages √ Linked 1 latest versions √ Run 0 scripts √ All packages installed (2 packages installed from npm registry, used 1s(network 1s), speed 104.39kB/s, json 2(8.79kB), tarball 100.61kB)

集成Vue Router

Vue Router使用参考API 参考

安装vue router

cnpm install vue-router

D:\temp\xiaorenshu-ui>cnpm install vue-router √ Installed 1 packages √ Linked 0 latest versions √ Run 0 scripts Recently updated (since 2020-10-02): 1 packages (detail see file D:\temp\xiaorenshu-ui\node_modules.recently_updates.txt) √ All packages installed (1 packages installed from npm registry, used 928ms(network 909ms), speed 153.09kB/s, json 1(14.41kB), tarball 124.75kB)

引入router，main.js完整代码如下

import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import App from './App.vue' import VueRouter from 'vue-router' // import login from './views/login.vue'; Vue.use(ElementUI); Vue.config.productionTip = false // 0. 如果使用模块化机制编程，导入Vue和VueRouter Vue.use(VueRouter); // 1. 定义 (路由) 组件。 // 可以从其他文件 import 进来 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } // 2. 定义路由 // 每个路由应该映射一个组件。 其中"component" 可以是 // 通过 Vue.extend() 创建的组件构造器， // 或者，只是一个组件配置对象。 // 我们晚点再讨论嵌套路由。 const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] // 3. 创建 router 实例，然后传 `routes` 配置 // 你还可以传别的配置参数, 不过先这么简单着吧。 const router = new VueRouter({ routes // (缩写) 相当于 routes: routes }) // 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由， // 从而让整个应用都有路由功能 new Vue({ router, render: h => h(App) }).$mount('#app')

app.vue代码如下

<template> <div id="app"> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> </template>

遇到问题，当我们点击路由跳转时报错

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build

你正在使用’仅有运行时环境’的Vue构建版本，该版本中template编译器不可用。要么预编译模板，使其变为render函数，或者使用’包含编译器’的Vue构建版本。

解决方法 （二者取其一即可）：

引入可编译的vue版本

修改main.js将import Vue from 'vue' 修改为 import Vue from 'vue/dist/vue.js'

项目根目录下新建vue.config.js，加入如下选项

// vue.config.js module.exports = { // 选项... runtimeCompiler: true }

集成Vuex进行状态管理

Vuex详细使用参考 VueX（Vue状态管理模式) 写的很详细

安装Vuex

cnpm install vuex --save

D:\temp\xiaorenshu-ui>cnpm install vuex --save √ Installed 1 packages √ Linked 1 latest versions √ Run 0 scripts √ All packages installed (1 packages installed from npm registry, used 887ms(network 880ms), speed 123.66kB/s, json 2(38.41kB), tarball 70.41kB)

引入到项目中

在src目录下新建目录store，新建index.js ，如下

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); const store = new Vuex.Store({ store: { name: "xiaoming" }, mutations: { //用来修改store内的值 必须同步执行 changename: (state, newname) => { state.store.name = newname; } }, getters: { //可以认为是 store 的计算属性 getnamelength: (state) => { return state.name.length; } }, actions: { //我们可以在 action 内部执行异步操作 getASynNameLength: (context) => { setTimeout(() => { context.commit('changename') }, 1000) } } }) export default store;

在main.js中引入

import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import './assets/icon/iconfont.css' //引入第三方icon库 import App from './App.vue' import router from './router.js' import store from "./store" Vue.use(ElementUI); Vue.config.productionTip = false // 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由， // 从而让整个应用都有路由功能 new Vue({ router, store, //相当于 store：store，当key和value相同时可简写 render: h => h(App) }).$mount('#app')

调用

this.$state.name;访问state取值 this.$state.commit("changename", user.name);访问mutations同步修改名称 this.$state.getters.getnamelength;访问getters取值 this.$state.dispatch.getASynNameLength；访问actions异步取值