vue 客户端项目

一.创建vue 项目文件夹

安装vue脚手架
cmd指令 : 
 vue create topline-admin
 //topline-admin   文件夹名称
 //选择默认或者自定义

二.调整src目录

• 清空默认内容（helloword.vue不要了，以及app.vue里的代码清空）
• 在src目录下，创建一个目录 views
• views:放界面组件
• components：放小功能组件
• router : 路由管理
• 设置package.json 第六行的"serve": "vue-cli-service serve ", 变为 "serve": "vue-cli-service serve --open",可以实现打开路由自动打开项目网页
  

三 . 设置路由管理 router --index.js文件

下载 vue-router 代码:npm install vue-router --save-dev
下载 less 代码 : npm install -D less-loader less ( 使用sess的下包方法 ) //方便布局 使用方法 : 要在style标签内部写 lang=“less” 并 添加一个 scoped 作用 : 本页面的样式不会影响到其他页面 只会作用在本页面

import Vue  from 'vue'
import VueRouter  from 'vue-router'
Vue.use(VueRouter)

//1. 导入组件
import login from '@/views/login'  // 在src 中设置views文件夹  并创建 login文件夹 包含一个 index.vue
									//在Vue_cli项目里@代表src的目录

//2. 设置路由规则
const routes= [
    {path : '/login' , component:login},
    {path :'/' , redirect : '/login'}    //重定向  打开网页第一个看见的就是这个网页
]

//3. 创建路由对象

const router = new VueRouter({
    routes
})


//4. 把路由对象暴露出去

export default router;   //在main.js中  挂载  router

		//在main.js中的挂载
		import router from '@/router/'//导入
			new Vue({
 			 router,
  			render: h => h(App),
			}).$mount('#app')

四 在app.vue 中设置根标签 并 设置路由出口

  <div class="app">
        <router-view></router-view>  //路由出口
    </div>

五 按照网页 找饿了么

npm码 : npm i element-ui
导入 饿了么在全局样式
设置全局基础样式表 安装在 scr 下的assets下 在main.js中导入全局样式 impor ' @/assets/base.less '

六 导入 axios 并设置axios 设置基地址

1. 安装 : npm install --save axios
2. 导入axios
   import axios from 'axios'
axios.defaults.baseURL = "http://ttapi.research.itcast.cn" // 设置基地址
   Vue.prototype.$axios = axios; //添加到原型中 就能通过 this.$axios+请求方式() 发送请求

七 使用element-ui 提交表单数据

以浮动为主布局display:flex justify-content: center align-item : center

因为有表单而且是登录页面 所以进行规则判断

1. 表单元素注意事项

		1.1  需要 包裹在``  标签下   并且设置需要绑定的data值  一般为 form   
 				 即为  ``   方便对form 进行取值  
 		1.2.1  设置规则   规则名称为 :  `rules:{}`  写在`data` 内 与`form`同级
 		1.2.2   规则内语法:  规则名 : [
 						     { required: true              // : 是否必填
 							  pattern :"0?(13|14|15|18|17)[0-9]{9}"		   // 正则表达式的规则	
 		  					  message: "手机号不能为空"    // : 没有按照规则填写  提示文字
 		  					  trigger: "blur"		      // : 何时进行判断
 		  					 }]    (  一个规则名 可以设置多组规则    规则是数组包着对象 )
 		 1.2.3   先在 ``    标签内添加 规则名  (使用规则)
 		 				即为 : `` 
 		 1.2.4  在需要使用规则的地方添加   ` prop=" 规则名 "  `
 		 			即为  `    `

在中设置 ref=“form”
即为 才能使用下面方法 进行表单判断

 this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });

2. 把请求来的数据 保存到 vuex中

1. 导入 vuex : npm install vuex --save
2. 创建一个 store文件夹( index.js) 保存 vuex
3. 根据官方文档 设置一下属性在 store中
   import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
4. vuex 文件index.js 基础配置

//获取 localStorage 中的 userInfo
let local = JSON.parse(window.localStorage.getItem('userInfo'))
export default new Vuex.Store({   //原样:const store = new Vuex.Stor   这个方法可以直接暴露接口
    //仓库:
    state: {        
        userInfo: local ? local : {},
    },
    //方法
    mutations: {
        changeUserInfo(state, newObj) {
            Object.assign(state.userInfo, newObj)   //es6 新语法   类似遍历
 
            // 把数据保存起来，存到localStorage
            window.localStorage.setItem('userInfo', JSON.stringify(state.userInfo))
        }
    }
})

5. 在main.js 中 挂载 vuex
   import store from './store'
   并在 vue实例化对象中 挂载

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

6. 在login的index.vue中 将数据保存到 vuex中
   代码:
   this.$store.commit( ' changeUserInfo' , res.data.data )
this.$ 挂载的vuex 名 ( ' vuex 文件中需要使用的方法 ' , 保存的数据 )
   
7. this.$router.push( ’ ./home ’ ) 跳转页面

八 home 页面

设置 作为路由出口

element UI 在标签el-menu 添加 router 属性就能通过 直接访问到 指定子组件 index后面接 地址

element ui 下拉框 的点击事件

1. 需要在包裹下拉框的标签内添加 @command = ' 点击事件名 '
2. 需要添加点击事件的标签 添加 command = ’ 这个标签专属的点击事件 ’
3. methods内

点击事件名 (cmd)  {
	if( cmd == '专属事件名' ) {
		事件
	}else if( cmd == ' 另外一个专属事件名  '  ){
	另外一个事件}
}

九 文章内容列表

属于home的子组件 所以组件文件夹放在home文件下 创建一个名为 article 的文件
在路由文件夹 在路由规则下 在home 规则下 逗号 设置子组件 如下:

1.1 添加请求拦截 和 响应拦截

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    //每个发送请求的地方  需要固定添加的内容
    //添加请求头:
     const obj = JSON.parse(window.localStorage.getItem('userInfo'))
  if(obj) {
    config.headers.Authorization = `Bearer ${obj.token}`
  }
  

	  return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
		//如果没有token 直接登录:
		if(error.response.status == 401) {
    Vue.prototype.$message.error('on')
    router.push('/login')
  }




    return Promise.reject(error);
  });

1.2 设置自定义列模版

1.2.1 第一种通过筛选器

scope.row 代表当前行的数据

1.2.2