vue3.0 搭建项目总结

hzc 发布于2019-08-02 15:06 / 2497人阅读

摘要：环境配置项目中的不同开发环境有很多依赖配置，所以可以根据环境设置不同的配置，以免在不同环境经常修改文件在根目录下创建环境文件，可以在不同环境设置一些配置变量，如图文件配置在文件里面有一个对象，可设置如图配置在里面需在对象里面设置重点删除默认

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文件

4.通用组件 级联（多选且可以选择全部）组件

安装插件 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引入

5.路由配置

我的项目中使用的是element-UI的导航菜单，支持路由，但是不支持前进后退，所以使用如下方式处理

 // 监控hash改变且处理，使浏览器支持前进后退
 window.addEventListener("hashchange", function(path) {
     router.replace(path.newURL.split("#")[1])
 })

项目中路由处理逻辑判断
判断缓存，是否新打开，添加重定向，获取所有打开路由，获取所有展示路由菜单

6.API处理

该项目采用axios调取api接口

GPU云服务器云服务器 vue3.0使用cdn 外呼项目总结云服务器搬迁项目总结搭建项目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53900.html

vue3.0 搭建项目总结

摘要：环境配置项目中的不同开发环境有很多依赖配置，所以可以根据环境设置不同的配置，以免在不同环境经常修改文件在根目录下创建环境文件，可以在不同环境设置一些配置变量，如图文件配置在文件里面有一个对象，可设置如图配置在里面需在对象里面设置重点删除默认 1.环境配置项目中的不同开发环境有很多依赖配置，所以可以根据环境设置不同的配置，以免在不同环境经常修改文件 1 在根目录下创建 `.env.[环...

Youngdze 2019-08-26 13:50 评论0 收藏0
vue3.0 搭建项目总结

摘要：环境配置项目中的不同开发环境有很多依赖配置，所以可以根据环境设置不同的配置，以免在不同环境经常修改文件在根目录下创建环境文件，可以在不同环境设置一些配置变量，如图文件配置在文件里面有一个对象，可设置如图配置在里面需在对象里面设置重点删除默认 1.环境配置项目中的不同开发环境有很多依赖配置，所以可以根据环境设置不同的配置，以免在不同环境经常修改文件 1 在根目录下创建 `.env.[环...

chavesgu 2019-08-30 10:57 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0