Element UI和VueWechatTitle等工具的引入

说明

这篇文章是为了让我和组里同学快速上手，学会使用Vue-Cli的基本使用而写的，里面可能有许多错误，还请仔细识别，当然，欢迎指正。

因为要使用Element UI和VueWechatTitle管理工具的缘故，之后或许还会使用更多工具，所以开一篇博客用作说明，之后若还有引入的工具，统一在此更新

Element UI

下载与使用

这里使用：

npm i element-ui -S

下载Element UI，这个版本是给Vue 2用的，虽然我们用的是Vue 3，但能用也就没管了。
之后，要在main.js配置为：

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

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  render: h => h(App)

})

即可使用，当然这些配置都会放在后面的main.js里统一贴出的

常见问题

Element UI引入后的相关问题放在这里

1.el-input不能输入的问题

这是因为没有刷新的原因
比如：

<el-form-item label="用户名">
        <el-input type="text" placeholder="请输入用户名" v-model="username"></el-input>
</el-form-item>

此时，是无法输入的，解决办法就是放一个刷新方法就行

在export default的methods里写上：

change(e){
this.$forceUpdate();
}

然后在将原句改成：

<el-form-item label="用户名">
        <el-input type="text" placeholder="请输入用户名" v-model="username" @input="change(e)"></el-input>
</el-form-item>

即可输入。

VueWechatTitle

下载与使用

这个是用来使每个界面的Title按需求显示的工具，我们使用：

npm install vue-wechat-title --save

进行下载，再在main.js里配置为：

import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)

即可使用

使用方法：

将app.vue的
<router-view/>改为：
<router-view v-wechat-title="$route.meta.title"/>

然后在你想设置的界面的index.js的router中的meta里写上即可：
这里以根界面为例：

export default new Router({
  routes: [
    {
      path: '/',//路径为/
      name: 'LoginUI',//name为LoginUI
      component: LoginUI,//组件是LoginUI
      meta:{
        title:"登录界面",//Title被设置为登录界面
      }
    },
  ]
})

常见问题

暂无

axios的安装

下载与使用

我们使用：

npm install axios --save-dev

下载axios，并在main.js里配置为：

import axios from 'axios';

Vue.prototype.$http=axios;//修改内部的$http为axios

常见问题

暂无

统一main.js配置

这里是给组内同学使用，每次加东西进来后，安装好后，请直接来此配置。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import VueWechatTitle from 'vue-wechat-title'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import axios from 'axios';

Vue.prototype.$http=axios;//修改内部的$http为axios


Vue.use(ElementUI);
Vue.use(VueWechatTitle)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  render: h => h(App)

})