小編給大家分享一下vue3.0搭建項目的示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)是一家專業(yè)提供神農(nóng)架林區(qū)企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、HTML5、小程序制作等業(yè)務(wù)。10年已為神農(nóng)架林區(qū)眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進行中。

1.環(huán)境配置

項目中的不同開發(fā)環(huán)境有很多依賴配置，所以可以根據(jù)環(huán)境設(shè)置不同的配置，以免在不同環(huán)境經(jīng)常修改文件

1 在根目錄下創(chuàng)建 `.env.[環(huán)境]` 文件，可以在不同環(huán)境設(shè)置一些配置變量，如圖

.env.dev 文件

2.eslint 配置

在package.json 文件里面有一個eslintConfig對象，可設(shè)置rules： 如圖

3.配置svg

在vue.config.js 里面需在module.exports對象里面設(shè)置

chainWebpack: config => {
  config.module.rules.delete('svg') // 重點:刪除默認(rèn)配置中處理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'
// 設(shè)置全局組件svgIcon
Vue.component('svg-icon', SvgIcon)
const req = require.context('./assets/svg', true, /\.svg$/) // 查詢文件加下面的svg文件
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req) // 全局導(dǎo)入svg文件

2.通用組件

級聯(lián)（多選且可以選擇全部）組件

安裝插件 multi-cascader-base-ele

使用

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

-- 支持選擇全部

上傳（支持圖片/視頻/裁剪圖片/拖拽）

安裝插件

vuedraggable axios vue-cropper

代碼