vue项目环境搭建

vue项目环境搭建

• cli3 / cli2

创建项目

vue create  项目名

• 项目目录构建（ 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去掉
      // }
      // }

    }
  }
}