vue项目环境搭建

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去掉
//   }
// }

}
}
}