vue3.0 搭建项目总结(详细步骤)

1.环境配置

项目中的不同开发环境有很多依赖配置，所以可以根据环境设置不同的配置，以免在不同环境经常修改文件

1 在根目录下创建 `.env.[环境]` 文件，可以在不同环境设置一些配置变量，如图

.env.dev 文件

2.eslint 配置

在package.json 文件里面有一个eslintConfig对象，可设置rules： 如图

3.配置svg

在vue.config.js 里面需在module.exports对象里面设置

chainWebpack: config => {
  config.module.rules.delete('svg') // 重点:删除默认配置中处理svg,//const svgRule = config.module.rule('svg') //svgRule.uses.clear()
  config.module
   .rule('svg-sprite-loader')
   .test(/.svg$/)
   .use('svg-sprite-loader')
   .loader('svg-sprite-loader')
   .options({
    symbolId: 'icon-[name]'
   })
 }

svg component

.svg-icon {
 width: 1em;
 height: 1em;
 vertical-align: -0.15em;
 fill: currentColor;
 overflow: hidden;
}


```

使用svg组件

import SvgIcon from '@/components/SvgIcon.vue'
// 设置全局组件svgIcon
Vue.component('svg-icon', SvgIcon)
const req = require.context('./assets/svg', true, /.svg$/) // 查询文件加下面的svg文件
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req) // 全局导入svg文件

2.通用组件

级联（多选且可以选择全部）组件

安装插件 multi-cascader-base-ele

使用

import multiCascader from 'multi-cascader-base-ele'
Vue.use(multiCascader)

-- 支持选择全部

上传（支持图片/视频/裁剪图片/拖拽）

安装插件

vuedraggable axios vue-cropper

代码

.image-draggable {
  display: flex;
  flex-wrap: wrap;
  .image-list {
    position: relative;

    display: inline-block;
    overflow: hidden;

    width: 148px;
    height: 148px;
    margin-right: 10px;

    cursor: pointer;
    &:hover {
      .icon {
 height: 20%;

 transition: all .5s;
 .video-icon {
   display: inline-block;

   margin-right: 10px;
 }
      }
    }
    .icon {
      position: absolute;
      bottom: 0;

      display: flex;
      justify-content: center;

      width: 100%;
      height: 0;

      background-color: rgba(215, 215, 215, 1);
      .icon-size {
 width: 2em;
 height: 2em;
      }
      .video-icon {
 display: none;
      }
    }
  }
}


.image-draggable {
  .el-progress {
    top: -50%;
  }
}

注册全局事件

创建eventBus.js

使用

import eventBus from './plugins/eventBus'
Vue.use(eventBus)

处理缓存

借用mounted， activated 事件处理数据

在某一次打开页面的时候进行数据初始化存储， 放置在vuex中，或者全局变量中，当需要初始化进行一个初始化，采取mixins引入

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。