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">&#xe631;</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;
}

 //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////