由于公司项目有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;
}

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






2022_vue3笔记的更多相关文章

  1. git-简单流程(学习笔记)

    这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹 初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file ...

  2. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  3. SQL Server技术内幕笔记合集

    SQL Server技术内幕笔记合集 发这一篇文章主要是方便大家找到我的笔记入口,方便大家o(∩_∩)o Microsoft SQL Server 6.5 技术内幕 笔记http://www.cnbl ...

  4. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  5. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  6. NET Core-学习笔记(三)

    这里将要和大家分享的是学习总结第三篇:首先感慨一下这周跟随netcore官网学习是遇到的一些问题: a.官网的英文版教程使用的部分nuget包和我当时安装的最新包版本不一致,所以没法按照教材上给出的列 ...

  7. springMVC学习笔记--知识点总结1

    以下是学习springmvc框架时的笔记整理: 结果跳转方式 1.设置ModelAndView,根据view的名称,和视图渲染器跳转到指定的页面. 比如jsp的视图渲染器是如下配置的: <!-- ...

  8. 读书笔记汇总 - SQL必知必会(第4版)

    本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...

  9. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  10. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

随机推荐

  1. SpringBoot实现动态数据源配置

    场景描述: 前一阵子接手的新项目中需要使用2个数据源. 一个叫行云数据库,一个叫OceanBase数据库. 就是说,我有时候查询要查行云的数据,有时候查询要查 OceanBase 的数据,咋办? 废话 ...

  2. SqlSugar的Select用法

    Select 位置 正常情况:应该在最后面, 一般是 .Where(..).OrderBy(..).Select(..).ToList() 特殊情况:如果Select不是最后一个位置,则Select要 ...

  3. 从嘉手札<2024-1-10.2>

    我们每个人都是在受挫中成长起来的 你不能剥夺他人在受苦中获益的权利 大部分人对吃苦的含义可能理解的太肤浅了 穷并不是吃苦 吃苦的本质是长时间为了某个目标而聚焦的能力 在这个过程中放弃娱乐生活.放弃无效 ...

  4. AIX6.1修改时区/修改时间

    环境 AIX6.1 修改时间 格式:date -n mmddHHMMYY  #mm表示月分,dd表示日期,HH表示小时,MM表示分钟,YY表示年份. 例子:date -n 1204171622  #修 ...

  5. C#使用Tamir.SharpSsh.jsch上传文件异常Algorithm negotiation fail

    环境 服务器:centos6.5 客户端:Windows 前言 项目中有一个exe,安装在客户端,其中有一个功能是将本地产生的文件上传至服务器,这个功能是以服务的方式安装在客户端上.之前一切好使,文件 ...

  6. 取代传统BIOS的EFI和UEFI究竟是什么?

    传统的蓝白BIOS界面可以说是陪伴着很多玩家共同成长,不过在英特尔发布Sandy Bridge架构处理器的时候,传统BIOS也到了和我们说再见的时间,采用图形化界面的EFI以及UEFI很快就取代了传统 ...

  7. SpringBoot基于Spring Security的HTTP跳转HTTPS

    简单说说 之所以采用Spring Security来做这件事,一是Spring Security可以根据不同的URL来进行判断是否需要跳转(不推荐), 二是不需要新建一个TomcatServletWe ...

  8. 从CPU100%高危故障到稳定在10%:一个月的优化之旅,成功上线!

    引言 经过三个月的开发,项目通过了所有测试并上线,然而,我们发现项目的首页几乎无法打开,后台一直发生超时错误,导致CPU过度负荷.在这次项目开发过程中,我制定了一份详细的技术优化方案.考虑到客户无法提 ...

  9. ehlib 排序后 滚动条 不对问题

    针对CDS的情况,作者的代码里 好像也不知道什么原因 必须写Cds.First但是,不写的话,就是不行,去掉作者的注释就可以了.

  10. Kafka-生产者、broker、消费者的调优参数总结

    生产环境下,为了尽可能提升Kafka的整体吞吐量,可以对Kafka的相关配置参数进行调整,以达到提升整体性能的目的. 本文主要从Kafka的不同组件出发,讲解各组件涉及的配置参数和参数含义. 一.生产 ...