vite+vue3+ts新手使用教程
0、介绍项目
通过vite 脚手架创建，全程复制。
主要使用框架: ((安装 less / scss, router, axios, pinia, element组件库, Ant Design组件库, md5等。)
包管理选择pnpm管理项目(原因:快、高效、严格等)
安装pnpm
node -v //安装之前查看node版本
n stable //更新自己的node(可以选择不更新)
npm install pnpm -g //全局安装
1、创建[vue3项目]
pnpm/yarn
pnpm create vite@latest //使用npu或cnpm等, 也是可以的, 根据需求选择
yarn create vite //或者使用yarn也是一种选择(后续统一pnpm)
输入项目名称
Project name: » vite-project //这样输入t3
Project name: ... t3
选择使用框架
? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
> Vue //选择vue
React
Preact
Lit
Svelte
Others
选择ts
? Select a variant: » - Use arrow-keys. Return to submit.
JavaScript
> TypeScript //选择ts
Customize with create-vue
Nuxt
控制台依次复制输入以下
Done. Now run:
cd t3 //进入此文件夹
pnpm install //安装依赖安装包
pnpm run dev //启动项目
至此项目完成了基础的初始化
2、安装less/scss
pnpm add -D sass //推荐sass(只需一个即可)
pnpm add -D less //或者选择less
sass官网: https://www.sass.hk/
3、安装 router
pnpm install vue-router@4
4、安装 axios
pnpm install axios
5、安装pinia
pinia在使用vue3+ts时候效果好很多
pnpm install pinia //效果等于vuex
6、安装element-puls组件库
pnpm install element-plus --save
pnpm install @element-plus/icons-vue //icon图片安装
7、安装Ant Design Vue 组件库
pnpm install ant-design-vue --save
pnpm install --save @ant-design/icons-vue //icon图片安装
main.ts引入
//ant-design-vue
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css'; // 引入AntDesign样式文件
//element-puls
app.use(ElementPlus);
直接使用即可
8、安装md5(根据项目选择)
pnpm install md5
pnpm install --save-dev @types/md5
9、自动导入
安装这两个包可以使得 vue.js 项目的开发变得更加高效和智能化。
用于在 Vue.js 项目中引入两个插件：unplugin-vue-components 和 unplugin-auto-import。
unplugin-vue-components 是一个 Vue.js 插件，可以自动将项目中使用的组件按需导入,减少代码体积
unplugin-auto-import 是一个 JavaScript 插件，可以自动将项目中使用的模块导入,减少代码量
pnpm install -D unplugin-vue-components unplugin-auto-import //安装
10、配置环境变量及规范的编码风格和构建生产环境的代码。
配置环境变量好处:
1.区分开发环境和生产环境。(通过配置环境变量，可以让项目在不同的环境下运行时使用不同的配置信息)
2.隐藏敏感信息。(某些配置信息，如 API 地址和密钥等，可能包含机密信息，不希望直接暴露在代码中)
编码风格
1.提高代码的质量(良好的编码风格可以让代码更易于阅读和维护，降低代码出错的概率)
2.方便团队协作。(规范的编码风格可以让团队成员更容易理解彼此的代码)
3.符合行业标准。(这将使代码更易于跨团队和跨组织共享和使用)
构建生产环境的代码
1.优化代码性能。(对于前端应用程序，用户的体验是非常重要的)
2.减小代码体积。(随着应用程序的发展和功能的增加，代码的复杂性和体积也会越来越大)
3.消除开发环境中的调试信息。(开发环境中通常会包含很多调试信息和工具，这些信息在生产环境中并不需要)
4.使用新的 JavaScript 特性(新的 JavaScript 特性在生产环境中可能会导致兼容性问题)