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构建版本。

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

1. 引入可编译的vue版本

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

2. 项目根目录下新建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异步取值