网页特效网站,网站正在建设中网页,宁波 seo整体优化,网页版传奇排行榜前言#xff1a;据说vue2将于 2023 年 12 月 31 日停止维护#xff0c;最近打算搭建一个vue3项目来学习一下#xff0c;以防忘记#xff0c;记录一下搭建过程。
一、使用npm创建项目
前提条件#xff1a;已安装 16.0 或更高版本的 Node.js
执行 “npm init vuelatest”…前言据说vue2将于 2023 年 12 月 31 日停止维护最近打算搭建一个vue3项目来学习一下以防忘记记录一下搭建过程。
一、使用npm创建项目
前提条件已安装 16.0 或更高版本的 Node.js
执行 “npm init vuelatest” 命令来创建vue3项目大家可以根据自己需要选择我的选择具体如下图 生成文件夹内容如下 继续输命令 启动项目后进入如下页面 此时项目已经初步搭建完成但是我打开之后发现项目文件有一些报错我想着可能是什么地方没有配置好于是查阅了很多资料进一步添加配置。 二、配置
1.配置tsconfig.json文件
找不到ts文件的需要在tsconfig.json里面进行配置没有的话就新建一个在根src同级的目录下面。
此处我只是做了简单配置具体大家可以按照自己实际使用来配置。添加了types: [vite/client]之后引入vitest模块红色波浪线报错没有了
{// files: [], //指定需要被编译的文件列表(较少),可以省略 .ts 后缀。默认值为 false// references: [ //引用。项目中如果有多个相互独立的模块可以使用这个属性来做分离。这样一个模块改变后就只重新编译这个模块其他模块不重新编译。编译时要改用 tsc --build。这在非常大的项目中应该能有不小收益。// {// path: ./tsconfig.node.json// },// {// path: ./tsconfig.app.json// },// {// path: ./tsconfig.vitest.json// }// ],compilerOptions: { //编译器相关的选项// forceConsistentCasingInFileNames: true, //是否强制代码中使用的模块文件名必须和文件系统中的文件名保持大小写一致target: esnext, //指定编译的目标版本,esnext 指的是当前版本的 TS 编译器支持的最高版本。module: esnext, //编译后的 JS 使用哪种模块系统。useDefineForClassFields: true,moduleResolution: node,strict: true, //启用严格模式能够更能保证类型检测的正确。能减少 bug缺点是要多写一些类型推断和分支判断的代码。jsx: preserve,sourceMap: true,skipLibCheck: true,resolveJsonModule: true,esModuleInterop: true,lib: [esnext, dom, dom.iterable, scripthost], //设置需要引入的全局类型声明。baseUrl: ./, //用于设置基础 url可以帮我们省掉一些多余的路径前缀。如果你想使用相对项目根目录的路径你需要将 baseUrl 设置为 . paths: { //路径重映射。要使用 paths首先要设置好 baseUrlpaths 的源路径和新路径会使用 baseUrl 作为相对路径计算。: [src],/*: [src/*]},types: [vite/client] //可指定只使用哪些全局类型声明而不是 node_modules/types 下所有的类型声明。},include: [ //指定需要编译的文件列表或匹配模式.可以通过通配符指定目录如 src/**/* 表示 src 下的所有文件。如果没有指定 files 配置默认值为 ** 即项目下所有文件如果配置了 files默认值为 [] 空数组。src/**/*.ts,src/**/*.d.ts,src/**/*.tsx,src/**/*.vue,*.ts],exclude: [node_modules, dist],//在 include 圈定的范围内排除掉一些文件。我们经常用它来排除编译输出目录、测试文件目录、一些生成文件的脚本等文件。默认值为 node_modules,bower_componen。}
2.配置env.d.ts文件
找不到vue文件的是因为ts无法解析我们的vue结尾的文件所以需要在src目录下
新建一个d.ts结尾的文件(可以叫env.d.ts)
/// reference typesvite/client /declare module *.vue {import { DefineComponent } from vue;// eslint-disable-next-line typescript-eslint/no-explicit-any, typescript-eslint/ban-typesconst component: DefineComponent{}, {}, any;export default component;
}// 环境变量 TypeScript的智能提示
interface ImportMetaEnv {VITE_APP_TITLE: string;VITE_APP_PORT: string;VITE_APP_BASE_API: string;
}interface ImportMeta {readonly env: ImportMetaEnv;
}
三、使用prettier工具
Prettier 是一款强大的代码格式化工具支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言基本上前端能用到的文件格式它都可以搞定是当下最流行的代码格式化工具。
1.安装prettier
npm install prettier -D 2.配置.prettierrc文件 semi语句末尾是否要加分号默认值true选择false表示不加 useTabs使用tab缩进还是空格缩进选择false tabWidthtab是空格的情况下是几个空格选择2个 singleQuote使用单引号还是双引号选择true使用单引号 printWidth当行字符的长度推荐80也有人喜欢100或者120 trailingComma在多行输入的尾逗号是否添加设置为 none {$schema: https://json.schemastore.org/prettierrc,semi: false,useTabs: false,tabWidth: 2,singleQuote: true,printWidth: 80,trailingComma: none
}
3.创建.prettierignore忽略文件
/dist/*
.local
.output.js
/node_modules/****/*.svg
**/*.sh/public/*
4.VSCode需要安装prettier的插件 四、使用ESLint检测 在前面创建项目的时候选择了ESLint所以Vue会默认帮助我们配置需要的ESLint环境。
1.VSCode需要安装ESLint插件 2.解决eslint和prettier冲突的问题
安装插件vue在创建项目时如果选择prettier那么这两个插件会自动安装
npm i eslint-plugin-prettier eslint-config-prettier -D 添加prettier插件
extends: [plugin:vue/vue3-essential,eslint:recommended,vue/eslint-config-typescript,vue/eslint-config-prettier/skip-formatting,vue/prettier,vue/prettier/typescript-eslint,plugin:prettier/recommended],
五、引入element-plus
1.安装element-plus
npm install element-plus --save
2.引入
1完整引入 如果你对打包后的文件大小不是很在乎那么使用完整导入会更方便。
// main.ts
import { createApp } from vue
import ElementPlus from element-plus
import element-plus/dist/index.css
import App from ./App.vueconst app createApp(App)app.use(ElementPlus)
app.mount(#app) Volar 支持如果你使用 Volar请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。
// tsconfig.json
{compilerOptions: {// ...types: [element-plus/global]}
}
(2)按需导入 自动导入需要使用额外的插件来导入要使用的组件。
安装unplugin-vue-components 和 unplugin-auto-import这两款插件。
npm install -D unplugin-vue-components unplugin-auto-import
然后把下列代码插入到你的 Vite的配置文件中。
// 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/resolversexport default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
}) 到此本文就结束了不足之处欢迎指出感激不尽~
