vue3实战项目总结

一创建项目

参考链接：blog.csdn.net/shichong123…

www.jianshu.com/p/5aac2b196…

二安装路由

npm install vue-router@4

三 安装vuex

npm install vuex@next --save

参考链接：blog.csdn.net/BigJF/artic…

四 安装 Element Plus

npm install element-plus --save

在main.js里添加这些文件路径

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
const app = createApp(App)
app.use(ElementPlus,{ locale: zhCn})

五安装 node-sass,sass-loader

npm install sass-loader node-sass -D

参考链接 www.lmlphp.com/user/16591/…

npm install sass@1.26.5 --save-dev
npm install sass-loader@8.0.2 --save-dev

参考链接： blog.csdn.net/l963937050/…

六 TypeScript相关

相关链接：v3.cn.vuejs.org/guide/types…

七 setup 语法糖

相关链接 ：blog.csdn.net/sxm666666/a…

www.cnblogs.com/bingcola/p/…

www.cnblogs.com/onesea/p/15…

八 vue3安装axios

npm i axios -S

链接：www.jianshu.com/p/7e41da1c1…

九 路径配置

参考链接： blog.csdn.net/weixin_4389…

十 跨域问题

链接：blog.csdn.net/qq_36293096…

import {
	defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [vue()],
	// 配置前端服务地址和端口
	server: {
		fs: {
			strict: false
		},
		host: '0.0.0.0',
		 port: 8889,
		// 是否开启 https
		https: false,
		//cors: true, // 默认启用并允许任何源
		//open: true, // 在服务器启动时自动在浏览器中打开应用程序
		// 设置反向代理，跨域
		proxy: {
			'/dev-api': {
				// 后台地址
				target: 'http://localhost:8888',
				changeOrigin: true,
				logLevel: 'debug', // 打印代理以后的地址
				rewrite: (path) => path.replace(/^\/dev-api/, '')

			}
		},
	}
})

十一 延伸学习

1. vue3 setup 中 router的使用方式

lanwuyaojiu.cn/blogm/bloga…

1. 路由跳转 blog.csdn.net/weixin_5134…
2. Vue3 的 setup 中使用 $refs blog.csdn.net/qq_28948031…
3. 改变

segmentfault.com/a/119000004…

1. 全局挂载方法使用 blog.csdn.net/C90283/arti… www.fulibavip.top/

检查端口是否占用

netstat -ano|findstr 8889

十二 中使用$forceUpdate

链接：blog.csdn.net/qq_43291759…

blog.csdn.net/weixin_3861…

十三 页面命名

链接 blog.csdn.net/zy21131437/…

或者 代码

<script setup name="dept">

十四全局方法和组件

1. 全局方法挂载

   // 全局方法挂载
   app.config.globalProperties.getConfigKey = getConfigKey
   app.config.globalProperties.getDicts = getDicts
   app.config.globalProperties.download = download
   

   插件挂载

   import tab from './tab'
   import auth from './auth'
   import cache from './cache'
   import modal from './modal'
   import download from './download'
   
   export default function installPlugins(app){
     // 页签操作
     app.config.globalProperties.$tab = tab
     // 认证对象
     app.config.globalProperties.$auth = auth
     // 缓存对象
     app.config.globalProperties.$cache = cache
     // 模态框对象
     app.config.globalProperties.$modal = modal
     // 下载文件
     app.config.globalProperties.$download = download
   }
   
   

2. 全局组件挂载

// 全局组件挂载
app.component('DictTag', DictTag)
app.component('Pagination', Pagination)
app.component('UploadFile', FileUpload)
app.component('UploadImage', ImageUpload)
app.component('ImagePreview', ImagePreview)
app.component('RightToolbar', RightToolbar)
app.component('svg-icon', SvgIcon)

3. 调用

   const { proxy } = getCurrentInstance()
   const token = computed(() => {
     return proxy.$store.getters.token
   })
   
   proxy.getConfigKey('sys.account.captchaOnOff').then((response) => {
     captchaOnOff.value = response.data
   })
   
   const userInfo = computed(() => {
     return proxy.$store.getters.userinfo
   })
   const currentTime = computed(() => {
     return proxy.parseTime(new Date())
   })
   

   3.1 组件调用 ref 组件

     <div class="star" v-for="(item, index) in starsCount" :key="index" ref="star"></div>
   

     let starArr = proxy.$refs.star
   

   3.2 store 和 router 调用

   const store = useStore()
   const router = useRouter()
   
       // 调用action的登录方法
         store
           .dispatch('Login', loginForm.value)
           .then(() => {
             proxy.$modal.msgSuccess('登录成功')
             router.push({ path: redirect.value || '/' })
           })
           .catch((error) => {
             console.error(error)
             proxy.$modal.msgError(error.msg)
             loading.value = false
             // 重新获取验证码
             if (captchaOnOff.value) {
               getCode()
             }
           })
       }
   

十五 页面动画

<style scoped lang="scss">
@keyframes rotate {
  0% {
    transform: perspective(600px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
  }
  100% {
    transform: perspective(600px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
  }
}

.stars {
  transform: perspective(500px);
  transform-style: preserve-3d;
  // position: absolute;
  perspective-origin: 50% 100%;
  left: 50%;
  animation: rotate 90s infinite linear;
  bottom: -200px;
  // 注意要用fixed，不然会超出屏幕
  position: fixed;
}

.star {
  width: 2px;
  height: 2px;
  background: #f7f7b8;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
}
</style>