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

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名申請、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、項(xiàng)城網(wǎng)站維護(hù)、網(wǎng)站推廣。

1.環(huán)境配置

項(xiàng)目中的不同開發(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 文件里面有一個(gè)eslintConfig對象，可設(shè)置rules： 如圖

3.配置svg

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

chainWebpack: config => {
  config.module.rules.delete('svg') // 重點(diǎn):刪除默認(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

代碼