安装及使用Vue

1. 安装vue-cli脚手架: npm install -g @vue/cli
2. 创建vue项目: vue create project_name
3. 启动项目: npm run serve
4. 打包项目: npm run build
5. 安装包: npm install element-ui --save (安装的包记录在package.json)
6. vue配置: vue.config.js

   lintOnSave:false, //禁用语法检查
   //开发环境设置
   devServer: {
       port: 8088, //端口
   	proxy: {
   		'/api': {
   			target: 'http://192.18.10.111:8080', //代理的目标地址 
   			ws: true, 
   			changeOrigin: true,
   			pathRewrite: {
   				'^/api': '/'
   			}
   		}
   	}
   }

Vue语法

<span>{{ msg }}</span> //文本插值
<div :class="newClass"></div> //值/属性绑定
<span :title="newTitle(num)"></span> //调用函数赋值
<el-button @click="submitForm('loginForm')"></el-button> //事件监听(@是v-on的简写)
<el-link v-if="item.prop.includes('fileName')">{{ scope.row.fileName }}</el-link> //条件渲染
<el-option v-for="(item,index) in taskList" :label="item.name" :value="item.name" :key="index"></el-option> //列表渲染

Vue基础

export default {
    //组件名字
    name: ,
    //当前组件调用的组件
    components: {},
    //数据
    data() {
        return {
        }
    },
    //父组件传值给子组件
    props: {},
    //计算属性(要用的属性不存在，需要计算得出，有缓存机制)
    computed: {},
    //方法(不能使用箭头函数=>，因为不能访问this)
    methods: {},
    //生命周期: 初始化值
    created(){},
    //生命周期:组件挂载后调用
    mounted(){},
}

Vue路由

1. 安装: npm i -S vue-router@3.0.1
2. main.js: import router from '@/router/index.js'
3. App.vue: <router-view></router-view>
4. @/router/index.js:

   {path: '/console',
   name:'Console',
   component: () => import("@/views/Console"),
   redirect: '/task', //重定向
   meta: { 
       title: 'Console',   
       activeMenu: 'Console',
       requireAuth: true, //路由权限                    
   },
   children: [
       {
           path: '/task',
           name:'Task',
           component: () => import("@/views/Console/Task"),
           meta: { 
               title: 'Task',
               activeMenu: 'Console',
           }
       },  
   ]}

组件通信

1. 父子组件通信:

   //父组件
   <SideMenu @toParentId="toContent" :sideMenuList="sideMenuList"></SideMenu> //父组件传值给子组件
   //子组件SideMenu.vue
   props: {
       sideMenuList: {
           type: Array,
           required: true
       },
   } //子组件接收父组件的值
   methods: {
       selectMenu(key) {
           this.$emit("toParentId",key) //子组件向父组件传值
       },
   }

2. localStorage:
   • 存值: localStorage.setItem(key, value)
   • 取值: localStorage.getItem(key)
3. vuex状态管理:
   • 使用公共数据state: this.$store.state.x
   • 修改公共数据mutations: this.$store.commit('mutations名',参数)

网络请求Axios

1. Get请求: axios.get(url,{params:}).then().catch()
2. Post请求: axios.post(url,{}).then().catch()

组件国际化&使用Echart

1. ElementUI组件国际化(main.js): Vue.use(ElementUI, { locale })
   ElementUI参考地址: https://element.eleme.cn/#/zh-CN/component/installation
2. 多语言切换: main.js

   import VueI18n from 'vue-i18n'
   Vue.use(VueI18n)
   const i18n = new VueI18n({
     locale: localStorage.getItem('languageSet') || 'en',
     messages: {
       'zh': require('./components/language/zh'),
       'en': require('./components/language/en'),
     },
   });

   组件中使用: <span>{{$t('item.name')}}</span>
3. 使用Echart(main.js):
   import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts