vue项目环境搭建

最新推荐文章于 2024-04-19 04:34:14 发布

原创最新推荐文章于 2024-04-19 04:34:14 发布 · 420 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue项目环境搭建 #cli3 #cli2

关于Vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何搭建Vue项目环境，包括使用CLI3和CLI2创建项目，详细解析了项目目录结构。同时，文章重点讲解了Vue UI组件库的选择，如ElementUI和MintUI，并对比了全局引用与按需引入的优缺点。文中给出了按需引入组件的步骤，包括安装、配置babel、引入样式以及在main.js中的应用。最后提到了vue.config.js中设置路径别名和反向代理的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

    }
  }
}