【无标题】

创建vue-cli2项目

1. 下载桥接工具降低vue-cli版本 npm install -g @vue/cli-service-giobal
   vue init webpack demo(项目名)
   cd demo
   npm run dev

vue-cli2中配置基础选项

配置ip、端口： config/index.js文件中
host:
port:
配置完重启

配置反向代理： vue-cli2 config/index.js中配置 vue-cli3 vue-cli4 vue.config.js中配置

proxyTable: {
“/api”:{
target:“http://admintest.happymmall.com/manage”,//转发目标路径
changeOrigin:true, //允许转发
pathRewrite: { //重写
‘^/api’: ‘’
}
}
},

配置完重启

在项目中配置scss

1. 安装scss依赖包
   cnpm install sass-loader@7.1.0 --save-dev （8.0.0） vue-cli2 报错
   cnpm install node-sass@4.13.1 --save-dev
2. 在build目录下配置：webpack.base.conf.js中配置rules下配置：
   rules下添加

{
test: /.sass$/,
loader: [‘style’,‘css’,‘sass’],
},

3. 在.vue中style中

4. 使用scss

1. 定义变量
   $变量名 ： 值 less定义变量 &变量名 ： 值 stylus $变量名 ： 值
   $fontColor : #ffffff;
   $bgColor : pink;

2. 定义宏
   @mixin 宏名(参数){内容} 组件中引入： @include 宏名(实参)

@mixin FontSize($X) {
font-size: $X;
font-weight: bold;
font-family: “微软雅黑”;
}
3) 样式嵌套
{{}}
4) & 之类的特殊符号

把组件中使用高频率 比如垂直 水平居中 字体全家桶 等。。 放在一个公共的scss文件中

使用element-ui

cnpm i element-ui -S

全局引入方式
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;

Vue.use(ElementUI);

按需引入方式
首先，安装 babel-plugin-component：

cnpm install babel-plugin-component -D

将 .babelrc 修改为：
{
“presets”: [[“es2015”, { “modules”: false }]],
“plugins”: [
[
“component”,
{
“libraryName”: “element-ui”,
“styleLibraryName”: “theme-chalk”
}
]
]
}

封装的axios请求

axios的二次封装 封装成一个公共的函数 公布出来 函数返回一个promise对象 在promise对象resolve返回接口数据

1. utils目录下 request.js

import axios from “axios”

// axios的二次封装 封装成一个公共的函数 公布出来 函数返回一个promise对象
const service = axios.create({
// baseURL:‘’,
//由于 已经在config/index.js中配置了配置反向代理 所以这里就不需要设置公共前缀了
// timeout:3000
})

// axios拦截器 请求拦截 响应拦截
service.interceptors.request.use((config) =>{
// // 判断登录成功 请求头中添加token
// if (store.getters.token) {
// // 让每个请求携带token-- [‘Token’]为自定义key 请根据实际情况自行修改
// config.headers[‘token’]
// }

return config
})
service.interceptors.response.use((config) =>{
//响应拦截的具体逻辑

return config
})

let Request = (params) =>{
// console.log(params)
return new Promise((resolve,reject) =>{
service({
…params
}).then((res) =>{
// console.log(res)
resolve(res)
}).catch((err) =>{
reject(err)
})

})
}

export { Request}

2. 在新建api.js中统一配置接口
   // 登录接口;
   export const login = (obj) => Request({
   url: “/api/user/login.do”,
   method:“post”,
   params:obj
   })
   …

分配路由

{
//一级路由
path: ‘/helloWorld/index’,
name: ‘HelloWorld’,
component: HelloWorld,
meta: { //元属性
title: “首页”,
requireAuth: true
},

children: [
{
path: ‘/home’,
name: ‘Home’,
component: () => import(“…/components/Home/Home.vue”),
meta: { //元属性
title: “首页”,
requireAuth: true
},
},
]
}
what?路由懒加载?
在vue-router 配置路由 , 使用 vue 的异步组件技术 , 实现按需加载。
原理：vue 异步组件技术：异步加载，vue-router 配置路由 , 使用 vue 的异步组件技术 , 实现按需加载。
为啥要使用路由懒加载？

路由懒加载的使用场景：where
首屏加载优化：运用 webpack 打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时
经常使用的组件

when 什么时候用：
页面组件切换，要提高组件切换速度的时候

how: 怎么用：

component: () => import(“…/components/comm/Bmap.vue”),
在一级路由的组件中需要展示二级路由的位置 使用 来展示

登录页

需要设置登录鉴权 如果没有登录不允许访问登录以外的页面

全局路由钩子中

document.title = ${to.meta.title}

const role = localStorage.getItem(“admin”)
const val = JSON.parse(role)
//没有登录 跳转到登录页
if (!val && to.path !== “/login”) {
next(‘/login’)
}

首页

分页器

以组件形式
子组件中：

---

父组件中：
<pagination
:pageSize=“pageSize”
:currentPage=“currentPage”
:total=“total”
@SizeChange=“SizeChange”
@CurrentChange=“CurrentChange”

data() {
return {
pageSize: 10,
currentPage: JSON.parse(localStorage.getItem(“pageNum”)) || 1,
total: 0
};
},

SizeChange(val) {
console.log(val);
}
CurrentChange(val) {
console.log(val);
}

富文本编辑器quill-editor的使用

cnpm install vue-quill-editor --save

全局引入：
// 文件：main.js
import VueQuillEditor from ‘vue-quill-editor’
// require styles 引入样式
// 下面三行必须要写
import ‘quill/dist/quill.core.css’
import ‘quill/dist/quill.snow.css’
import ‘quill/dist/quill.bubble.css’

Vue.use(VueQuillEditor)

局部引入方式：

<quill-editor
v-model=“form.detail”
:options=“editorOption”
@change=“onEditorChange($event)”>

content: ‘

I am quill-edit Example

’,

onEditorChange(v) {
console.log(v.text);
this.form.detail = v.text;
},

图片上传功能： element ui 中的 el-upload组件

<el-upload
class=“upload-demo”
name=“upload_file”
multiple
:limit=“3”
action=“/api/product/upload.do”
:on-preview=“handlePreview”
:before-remove=“beforeRemove”
:on-success =“handleSuccess”
:on-exceed = “handleExceed”
:before-upload = “beforeAvatarUpload”

点击上传

methods:{
handlePreview(file){
console.log(file)
// 相对地址
this.form.subImages = file.response.data.uri;
},
beforeRemove(file, fileList){
console.log(file, fileList)
return this.$confirm(‘确定删除${file.name}) }, handleSuccess(response, file, fileList){ console.log(response) console.log(file) console.log(fileList) this.form.subImages = file.response.data.uri; }, handleExceed(files, fileList){ console.log(files) this.$message.warning(当前限制选择3个文件，本次选择了$files.length个文件,共选择了${files.length + fileList.length}个文件`)

},
// 限制图片类型及大小
beforeAvatarUpload(file) {
console.log(file)
console.log(file.name)
// 原生js能力 msg文件的后缀名
let msg = file.name.substring(file.name.indexOf(‘.’)+1)
// console.log(msg)
const extension = msg === ‘jpg’;
const extension2 = msg === ‘png’;
// 2M size 文件的大小
const size = file.size / 1024 /1024;
console.log(size)

if (!extension && !extension2) {
this.$message({
message:“上传文件只能是 jpg、png格式”,
type:“warning”
})

}
if ( size>= 2) {
this.$message({
message:“上传文件大小不能超过2MB！”,
type:“warning”
})
return
}

return extension || extension2

},
}