天津网站建设公司推荐,如何推销自己的产品,单页企业官网模板,济南网站开发重新整理了一下项目开发必备的一些操作#xff0c;以后直接复制黏贴运行#xff0c;随着项目开发#xff0c;后期会陆续补充常用插件或组件等 如果你是还没有安装过的新人#xff0c;建议从《通过安装Element UI/Plus来学习vue之如何创建项目、搭建vue脚手架、npm下载、封装… 重新整理了一下项目开发必备的一些操作以后直接复制黏贴运行随着项目开发后期会陆续补充常用插件或组件等 如果你是还没有安装过的新人建议从《通过安装Element UI/Plus来学习vue之如何创建项目、搭建vue脚手架、npm下载、封装等》开始。
VSCODE插件
建议的插件
Chinese (Simplified) (简体中文) Language Pack for Visual Studio CodeElement Plus Snippetselement-plus-docelement-plus-vueTONGYI LingmaVue - Officialvue3-snippets-for-vscodeVetur / Volar不建议安装Volar已正式更名为Vue-Official 常用组件的安装命令
这里全用cnpm方便自己复制黏贴如果你镜像过npm就改一下
# 创建脚手架
cnpm create vitelast
# 安装依赖
cnpm install
# 启动项目
npm run dev# 安装路由
cnpm install vue-router
# 安装mitt
cnpm install mitt
# 安装pinia
cnpm install pinia
# 安装pinia持久化
cnpm install pinia-plugin-persistedstate
# 安装axios
cnpm install axios
# 安装element-plus
cnpm install element-plus --save
# 安装图标
cnpm install element-plus/icons-vue
# 安装路径
cnpm install path常用配置修改
支持符号作为根路径
// vite.config.js 或 vite.config.ts
// 1. 方法1
import { defineConfig } from vite
import vue from vitejs/plug-vue// https://vite.dev/config/
export default defineConfig({plugins: [vue()],//加上本句可用来定义位置resolve: {alias: {: /src}}
})
// 2. 方法2
import { defineConfig } from vite
import vue from vitejs/plug-vue
import path from path //前面已经cnpm install path// https://vite.dev/config/
export default defineConfig({plugins: [vue()],//加上本句可用来定义位置resolve: {alias: {: path.resolve(__dirname, src)}}
})// 3.注意如果是ts编译考虑
{files: [],references: [{ path: ./tsconfig.app.json },{ path: ./tsconfig.node.json }],compilerOptions: {baseUrl: ./, // 解析非相对模块的基地址默认是当前目录paths: { // 路径映射相对于baseUrl/*: [src/*] }}
}typescript配置 vscode开发typescript在引用vue时会提示找不到模块产生各种波浪线这时需要在环境配置中加入声明
// src/vite-env.d.ts
/// reference typesvite/client /// 定义 .vue 文件的模块声明使 TypeScript 能够正确识别和处理 Vue 组件
// 1. 方法1更适合项目中有复杂的组件配置需求或者需要更精确的类型检查
declare module *.vue { import { ComponentOptions } from vueconst componentOptions: ComponentOptionsexport default componentOptions
}
// 2. 方法2
declare module *.vue {import Vue from vue;export default Vue;
}// 注意当自定义目录下有一些常规内容读不了试试把这个目录也加进去如下
// 定义路径别名的类型声明
declare module /xxxx/* {import type { ComponentOptions } from vueconst componentOptions: ComponentOptionsexport default componentOptions
}
