vue3 + vite + elmentui

项目建成后，最苦逼的是需要去配置各种文件，没头绪了好几天，也是和同事一起慢慢搞起，

一个 vite.config.js ,话不多说，直接上代码

const path = require('path')
// vite.config.js # or vite.config.ts
console.log(path.resolve(__dirname, './src'))

module.exports = {
  alias: {
    // 键必须以斜线开始和结束
    '/@/': path.resolve(__dirname, './src')
  },
// 配置本地 host
  hostname: 'www.baidu.com',
  /**
   * 在生产中服务时的基本公共路径。
   * @default '/'
   */
  base: './',
  /**
   * 与“根”相关的目录，构建输出将放在其中。如果目录存在，它将在构建之前被删除。
   * @default 'dist'
   */
  outDir: 'dist',
  port: 3000,
  // 是否自动在浏览器打开
  open: true,
  // 是否开启 https
  https: false,
  // 服务端渲染
  ssr: false,
  // 引入第三方的配置
  //   optimizeDeps: {
  //     include: ["moment", "echarts", "axios", "mockjs"],
  //   },
  proxy: {
    // 如果是 /api 打头，则访问地址如下
    '/api': {
      target: 'https://baidu.com/',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    }
  },
  optimizeDeps: {
    // element-plus中文库
    include: ['element-plus/lib/locale/lang/zh-cn', 'axios']
  }
}

现在项目启动，vue3 相对于vue2的最直接区别就在于，vue3直接运用 setup（）｛｝函数，

 

<script>
import { ref, onMounted, watch } from 'vue'
import { useStore } from 'vuex'
import Aos from 'aos'
import { getMsg, getHpStyleByWebsiteId } from '/@/api/index.js'
import '/@/utils/rem.js'
export default {
  setup() {
    const store = useStore()
    //获取网站信息
    const getinfo = async () => {
      const data = {
        url: '',
        type: 'all'
        // url: window.location.hostname,
        // type: 'www'
      }
      const websiteId = await getMsg(data).then(res => {
        // console.log(res, res.data.data.id, 'wwwwdddd')
        if (res.data.message === 'success' && res.data.data) {
          const data = {
            
          }
          //将基础信息存入vuex 和 localStorage
          store.commit('SET_HOMEDATA', data)
          localStorage.setItem('indexData', JSON.stringify(data))
          
        }
      })
    }

    // cnzz
    watch('$route', () => {
      setTimeout(() => {
        // 避免首次获取不到window._czc
        if (window._czc) {
          const location = window.location
          const contentUrl = location.pathname + location.hash
          const refererUrl = '/'
          // 用于发送某个URL的PV统计请求，
          window._czc.push(['_setAutoPageview', false])
          window._czc.push(['_trackPageview', contentUrl, refererUrl])
        }
      }, 300)
    })

    onMounted(() => {
      getinfo()

      Aos.init({
        duration: 500,
        easing: 'ease',
        delay: 0,
        offset: 100
      })
    })
    return {}
  }
}
</script>

js 中引入 watch onMounted 等方法，直接去用，相当于vue2中的watch mounted ，return出去的是在 template 中要用到的方法或参数，

 

 像现在 const 的参数，和vue2中的data中的参数一样

 

 在return 出去