2022_vue3笔记
由于公司项目有vue2.5,自己电脑又要3.2，总不可能总是安装删除环境，这儿使用安装nvm版本管理
安装node前配置一下镜像地址 node_mirror: https://npm.taobao.org/mirrors/node/ npm_mirror: https://npm.taobao.org/mirrors/npm/
nvm off // 禁用node.js版本管理(不卸载任何东西)
nvm on // 启用node.js版本管理
nvm install <version> // 安装node.js的命名 version是版本号 例如：nvm install 8.12.0
nvm uninstall <version> // 卸载node.js是的命令，卸载指定版本的nodejs，当安装失败时卸载使用
nvm ls // 显示所有安装的node.js版本
nvm list available // 显示可以安装的所有node.js的版本
nvm use <version> // 切换到使用指定的nodejs版本
nvm v // 显示nvm版本
nvm install stable // 安装最新稳定版
新建一个项目
npm create vite@latest my-vue-app -- --template vue
开发前期,看一下快捷健
代码格式化 alt+crtl +L s格式化代码 ctrl+shift+N 通过文件名快速查找工程内的文件（必记） ctrl+shift+alt+N 通过一个字符快速查找位置（必记） ctrl+F 在文件内快速查找代码 F3 查找下一个 shift+F3 查找上一个 ctrl+R 文件内代码替换 ctrl+shift+R 指定目录内代码批量替换 ctrl+shift+F 指定目录内代码批量查找 ctrl+R 文件内代码替换 界面操作 快捷键说明 ctrl+shift+A 快速查找并使用编辑器所有功能（必记） alt+[0-9] 快速拆合功能界面模块 ctrl+shift+F12 最大区域显示代码（会隐藏其他的功能界面模块） alt+shift+F 将当前文件加入收藏夹 ctrl+alt+s 打开配置窗口 ctrl+tab 切换代码选项卡（还要进行此选择，效率差些） alt+<-或-> 切换代码选项卡 ctrl+F4 关闭当前代码选项卡 代码编辑 快捷键 说明 ctrl+D 复制当前行 ctrl+W 选中单词 ctrl+<-或-> 以单词作为边界跳光标位置 alt+Insert 新建一个文件或其他 ctrl+alt+L 格式化代码 shift+tab/tab 减少/扩大缩进（可以在代码中减少行缩进 ） ctrl+Y 删除一行 shift+enter 重新开始一行（无论光标在哪个位置） 导航 快捷键 说明 esc 进入代码编辑区域 alt+F1 查找代码在其他界面模块的位置， 颇为有用 ctrl+G 到指定行的代码 ctrl+]/[ 光标到代码块的前面或后面 alt+up/down 上一个/下一个方法
第三步，修改自动格式化代码；pretter
eslink 报错解决语句，根据报错添加忽略
第一步安装路由：
新建文件夹，src/router/index
import { createRouter, createWebHistory} from "vue-router"
import Home from "../views/Home.vue";
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/about",
name: "About",
component: () =>
import(/* webpakChundName: "about */ "../views")
},
];
const router = createRouter({
history: createWebHistory(),
routes,
})
export default router;
引入图标库，引用阿里，只需要导入包，然后在main.js 文件中，
import './assets/fontstyle/iconfont.css'
使用时加入类名和图标代码就可以
span class="icon iconfont"></span>
如果是elementp-plus用图标的话只需要导入图标库和组件库就可以
安装组件库npm install element-plus --save
安装图标库npm add @element-plus/icons-vue
注册组件：
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) }
最简单使用示全例 <Edit />
如果element-plus,想按需引入的话，需要安装二个自动导包功能插件
npm install -D unplugin-vue-components unplugin-auto-import
其中一个unplugin-auto-import 自动导包软件，就算这儿不用，在开发中也会用到，
// vite.config.ts import { defineConfig } from 'vite' import AutoImport from 'unplugin-auto-import/vite'
//本次飘黄部份是按需导包需要的组件配配 import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' export default defineConfig({ // ... plugins: [ // ... AutoImport({ resolvers: [ElementPlusResolver()],
imports:['vue','vue-router']
], }), Components({ resolvers: [ElementPlusResolver()], }), ], })
按需导入使示界面使用。
<template>
<el-button circle/>
<Edit/>
</template>
<script setup>
//按需导入写法
import {
Check,
Edit,
} from '@element-plus/icons-vue'
</script>
<style scoped>
</style>
自动导包插件 npm i unplugin-auto-import -D
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import';
const path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),
AutoImport({
imports: ['vue', 'vue-router']
})
],
//配置@代表src以下路径字符
resolve: {
alias: {
// --dirname 前面是二根划线
'@': path.resolve(__dirname, './src')
}
}
})
正式开发前，还得样式初始化 reset.css，可以用插件，但是插件名忘了，以下最简版得置样式。
*{ margin: 0; padding: 0; } a{ text-decoration: none; } ul{ list-style: none; }
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
