vue项目与高级应用

vue项目与高级应用

vue项目

后台管理系统

1.vue项目环境搭建

• cli3 / cli2
• 项目目录构建（ src 源代码开发目录中的 ）
• pages 页面
• components 组件
• common 公共组件
• layout 项目布局外壳
• store vuex
• router 路由
• lib 第三方插件
• utils 自行封装的库
• vue UI组件库引入
• 关于vue的ui组件库很多 / 也可以使用 ui库 类似 SUI
• pc： iview 、 elementUI
• 移动端：MintUI
• 使用
• 全局引用： 将ui组件库中的全部组件引入项目，这种做法会增大项目体积
• 按需引入： 将你需要的组件引入进来
• 第一步： 先安装：
  $ yarn add iview
$ yarn add babel-plugin-import -D
• 第二步： 在cli3中bable优雅降级配置中引入以下配置

module.exports = {
presets: [
'@vue/app'
],
"plugins": [["import", {
"libraryName": "iview",
"libraryDirectory": "src/components"
}]]
}

• 第三步： 在main.js中引入样式：import ‘iview/dist/styles/iview.css’
• 第四步： 注意重启项目
• 第五步：引入组件测试
• webpack覆盖性文件 vue.config.js 配置
• 路径别名
• 反向代理
• cli中webpack配置反向代理使用的是一个第三方的中间件，叫做 http-proxy-middlerware

/*
webpack的覆盖配置性文件
webpack底层是Node.js
是采用的Common.js规范
*/
const path = require( 'path' )
module.exports = {
// 路径别名
chainWebpack: config => { //config就是 cli3脚手架内部的webpack配置
config.resolve.alias
// .set(路径名，对应目录的磁盘路径)
.set( 'components', path.join( __dirname,'src/components'))
.set( 'common', path.join( __dirname,'src/components/common'))
.set( 'layout', path.join( __dirname,'src/components/layout'))
.set( 'pages', path.join( __dirname,'src/pages'))
.set( 'lib', path.join( __dirname,'src/lib'))
.set( 'store', path.join( __dirname,'src/store'))
.set( 'router', path.join( __dirname,'src/router'))
.set( 'utils', path.join( __dirname,'src/utils'))
.set( 'assets', path.join( __dirname,'src/assets'))
.set( 'stylesheets', path.join( __dirname,'src/assets/stylesheets'))
},
// 反向代理
devServer: {
open: true,//项目重启时，自动打开浏览器
hot: true,//热重载
proxy: { //反向代理
// 反向代理的标识： 反向代理的配置
// 这个反向代理的标识最好是目标地址的一个路径
// 举例： http://m.maoyan.com/ajax/movieOnInfoList?token= 标识: /ajax
'/ajax': {
target: 'http://m.maoyan.com', //代理的目标源
changeOrigin: true, //是否修改目标源
},
// '/maoyan': {
// target: 'http://m.maoyan.com',
// changeOrigin: true,
// pathRewrite: { //路径重写
// '^/maoyan': '' //将/maoyan去掉
// }
// }
}
}
}