这篇文章主要介绍了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组件
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
代码
注册全局事件
创建eventBus.js
使用
import eventBus from './plugins/eventBus' Vue.use(eventBus)
处理缓存
借用mounted， activated 事件处理数据
在某一次打开页面的时候进行数据初始化存储， 放置在vuex中，或者全局变量中，当需要初始化进行一个初始化，采取mixins引入
以上就是vue3.0 搭建项目总结(详细步骤)的详细内容，更多请关注0133技术站其它相关文章！
