一.使用yarn or pnpm 创建项目
- yarn create vite or pnpm create vite
- 输入项目名 :如 vue3_demo
- 选择TS
- 使用Vscode编译器,推荐的插件 Vue Language Features (Volar) TypeScript Vue Plugin
注:如有安装Vetur的插件可以禁用掉,防止与新安装的Volar有冲突 检查是否安装包管理器,首先查看 node -v 版本,查看yarn 或者 pnpm 是否安装 yarn -v or pnpm -v
二.启动项目
- 从VScode打开项目名
- yarn 一下;(yarn 安装依赖包 node_modules)
- 启动项目:yarn dev
注:我这里是用yarn 创建的项目.如用pnpm创建 的使用pnpm dev启动;
三.清理项目文件
初始项目打开后有默认的页面,那么咱们可以把这些清理掉;
- 删除compoents下的.vue文件
- 清空App.vue里面内容,然后使用快捷键 vtp 创建代码;内容随便写点占内容;方便观察浏览器页面的变化.后期开发开发项目再改.
- 删除style.css文件.(在mian.ts清除style.css的引入)
四.搭建工程目录
在src文件夹创建以下工程目录
- api ajax(axios)工具管理文件夹
- assets 静态资源目录,用来存放图片,CSS什么的
- components 公共小组件
- directives 自定义指令文件夹
- hooks 全局hooks函数 文件夹
- layout 框架
- router 路由
- store pinia仓库
- utils 工具文件夹
- views 页面级别组件文件夹
- types ts约束配置
五.简单配置 vite.config.ts
前期我们可以先配置路径的别名
//引入路径别名 import { resolve } from 'path' //在defineConfig里面进行配置 resolve: { alias: { '@': resolve(__dirname, 'src') } }
六.安装router 和 pinia
若你打开的 package.json 文件中的dependencies里只有vue,那么需要安装router和pinia
有的话则忽略;
安装方法: yarn add router 和 yarn add pinia
七.重置样式 安装sass 配置预加载scss
/*找到.scss文件放到assets中**/
- 在mian.ts注入全局样式
import '@/assets/你的路径名/你的文件名'
- 安装sass
yarn add sass -D
- 在vite.config.ts 注入全局默认样式变量
同样在defineConfig里面进行配置:
css: { //css预处理配置项 preprocessorOptions: { scss: { //注入全局样式变量 注意自己的文件名,别导错了,后面记得加上分号 ';'' additionalData: `@import '@/assets/styles/variables.scss';` } } }
八.配置svg图标&&全局使用svg图标
1.先安装插件
yarn add vite-plugin-svg-icons -D 方便后期配置图标
2.在vite.config.ts进行配置svg
a.引入插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
b.在plugins 里面进行配置;
createSvgIconsPlugin({ //指定要缓存的文件夹 svg文件夹里面全是svg图标 iconDirs: [resolve(process.cwd(), 'src/assets/icons')], //指定symolId格式,使用时候<use :xlink:href="'#'+name" :fill="color"></use> symbolId: '[name]' })
[注:如果报错cannot find package 'fast-glob' ,就安装插件yarn add fast-glob -D]
3.在mian.ts引入全局图标
import 'virtual:svg-icons-register'
4.在App.vue里面测试图标
<svg class="icon" aria-hidden="true"> //注意要跟你的svg文件名一样 <use xlink:href="#tiao" fill="red"></use> </svg>
5.测成功之后咱们可以封装svg,供全局使用
- 在components文件夹下新建SvgIcon.vue
- 在main.ts下引入SvgICon.vue
- 使用createApp(app).component('组件名', 组件实例)
- 在app.vue使用 根据需求名称,颜色,大小]进行父传子
- SvgIcon里面拿到数据 动态渲染 可以使用计算属性 拼接字符串
代码如下:
/** main.ts */ import { createApp } from 'vue' import App from './App.vue' //注册全局图标 import 'virtual:svg-icons-register' //引入svg图标 import SvgIcon from '@/components/SvgIcon.vue'; const app = createApp(App) app.component('SvgIcon', SvgIcon) app.mount('#app') /* SvgICon.vue文件 */ <template> <div> <svg :class="iconClass" aria-hidden="true"> <use :xlink:href="'#' + name" :fill="color"></use> </svg> </div> </template> <script setup lang="ts"> import { computed } from 'vue'; //接收父组件参数 type props = { name?: string color?: string size?: string } const prop = withDefaults(defineProps<props>(), { name: 'excel', color: '#FFFFFF', size: 'middle' }) //计算属性 设置动态class const iconClass = computed(() => { return `icon icon-${prop.size}` }) console.log(prop); </script> <style scoped lang="scss"> .icon { //vertical-align 为了避免样式出问题 vertical-align: -0.15em; // fill属性运行填充颜色 fill: currentColor; overflow: hidden; // 宽高可控 &-small { width: 1em; height: 1em; } &-middle { width: 2em; height: 2em; } &large { width: 2.5em; height: 2.5em; } } </style> /** app.vue文件 */ <template> <div> <!-- 自定义svg父子组件传参 --> <svg-icon color="skyblue" size="middle"></svg-icon> </div> </template> <script setup lang="ts"> </script> <style scoped lang="scss"></style>
九.安装UI组件库
比如 element-ui plus Arco Design ... 官网有安装教程 自行安装
十.vue-router路由配置
- 建:建立页面级别组件
- 配:配置路由地址与页面级别组件一一对应
- 测:<router-view></router-view>出口测试
// 引入路由的相关方法 import { createRouter, createWebHashHistory } from 'vue-router' //引入路由类型 // import type { RouteRecordRaw } from 'vue-router' import Layout from '@/layout/Layout.vue' import { MyRoutes } from '@/types/router'; //配置项 const routes: MyRoutes = [ { path: '/', redirect: '/home' }, { path: '/login', component: () => import('@/views/login/index.vue') }, { path: '/home', component: Layout, meta: { title: '唱', path: '/home' }, children: [ { path: '', component: () => import('@/views/home/index.vue') } ] }, ] //创建路由实例 const router = createRouter({ routes, history: createWebHashHistory() }) //导出路由实例 export default router; /*types文件下的router.d.ts */ // 引入路由自带的约束 import { RouteRecordRaw } from 'vue-router'; //自定义的配置 export interface RouteItem { hidden?: boolean meta?: { title?: string path?: string } children?: Array<MyRouteTy> } //合并配置生成自己的配置 export type MyRouteTy = RouteRecordRaw & RouteItem //合并配置的数组 export type MyRoutes = Array<MyRouteTy>
<!-- app.vue出口 --> <template> <div class="app"> <router-view></router-view> </div> </template> <script setup lang="ts"> </script> <style scoped lang="scss"> .app { height: 100%; } </style>
十一.消除影响观感的红波里线(了解)
1.如图:以下的红色波浪线虽然不影响项目的运行,但影响了个人的观感.
解决方法如下: 在tscongig.json中修改
"noUnusedLocals": true,改为 "noUnusedLocals": false2.如图:安装UI组件库时引入中文库时出现波浪线(实际在项目中运行已生效中文字体)
解决:
/*解决:在**.d.ts文件中声明,我因为懒直接在src目录下types文件夹中的vite-env.d.ts文件中写*/ //由于ts无法解析我们的vue结尾的文件 declare module '*.vue' { import { ComponentOptions } from 'vue' const componentOptions: ComponentOptions export default componentOptions }
十二.使用Pinia
1.首先在main.ts中引入pinia
//引入pinia import { createPinia } from 'pinia' app.use(createPinia());
2.在store文件创建一个.ts文件的pinia仓库
//定义pinia仓库 import { defineStore } from 'pinia'; import { ref } from 'vue'; //使用仓库 export const UseAppStore = defineStore('app', () => { //里面写你的逻辑代码 //例如写一个菜单栏的伸缩 const isCollapse = ref<boolean>(false) //方法展开和收起 const toggleCollapse = () => { isCollapse.value = !isCollapse.value } return { isCollapse, toggleCollapse, } })
3.在需要点击伸缩按钮上绑定一个事件,比如在我的头部nav.vue需要点击伸缩左边菜单栏
<template> <el-icon @click="toggleCollapse" size="26"> <Fold /> </el-icon> </template> <script setup lang="ts"> import { computed} from 'vue'; import { UseAppStore } from '@/store/app'; //解构方法 const $appStore = UseAppStore() const { toggleCollapse } = $appStore; </script> <style scoped lang="scss"> </style>
4.在左边菜单栏sider.vue文件
<template> <div> <el-menu :collapse="isCollapse"> <!-- 你的菜单栏 --> </el-menu> </div> </template> <script setup lang="ts"> //获取动态地址 import { computed } from 'vue'; import { UseAppStore } from '@/store/app'; //pinia仓库 const $appStore = UseAppStore() const isCollapse = computed(() => $appStore.isCollapse ) </script> <style scoped lang="scss"> </style>
十三:效果图
最后如有不明确的地方请大佬指出,希望大家可根据自己的需求开发~~~
十四.网上的兼职平台
https://zb.oschina.net--开源众包
https://zbj.com--猪八戒
https://www.proginn.com--程序员客栈
https://mart.coding.net--coding码市
http://linktion.cn--英选
http://www.kaifabang.com--开发邦
https://www.freelance.com--freelancer
http://stackoverfloow.com/#--stackoverflow
https://www.yuanjisong.com--猿急送
http://rrkf.com--人人开发
http://www.mayigeek.com--马易
温馨提示:
1.无第三方担保不要接单
2.不接无具体需求的单子
3.442收费方式(不给完钱不给完整代码)