vue3.0搭建项目的示例-创新互联

小编给大家分享一下vue3.0搭建项目的示例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名申请、虚拟空间、营销软件、网站建设、项城网站维护、网站推广。

1.环境配置

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

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

vue3.0搭建项目的示例

vue3.0搭建项目的示例

.env.dev 文件

2.eslint 配置

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

vue3.0搭建项目的示例

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

vue3.0搭建项目的示例

使用

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

处理缓存

借用mounted, activated 事件处理数据

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

vue3.0搭建项目的示例

vue3.0搭建项目的示例

以上是“vue3.0搭建项目的示例”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网站题目:vue3.0搭建项目的示例-创新互联
本文地址:http://myzitong.com/article/ddehoj.html