安装 node.js 并配置好环境变量,使用 node -v 检查当前 node 版本 并验证是否安装完成!
全局安装 yarn npm install -g yarn 查看版本:yarn --version Yarn 淘宝源安装
yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
新建项目 yarn create vite-app '项目名'
.配置 `typescrip `
yarn add -D typescript ts-node @typescript-eslint/eslint-plugin @typescript-eslint/parser
新建 tsconfig.json 文件
配置 `eslint` `prettier`
yarn add -D eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser
新建 .eslintrc.js .eslintignore 文件
配置 `stylelint` `prettier`
yarn add -D stylelint stylelint-config-prettier stylelint-config-standard stylelint-order
新建 stylelint.config.js .stylelintignore 文件
配置提交规范 `commitlint` `changelog`
yarn add -D @commitlint/cli @commitlint/config-conventional commitizen conventional-changelog-cli conventional-changelog-custom-config
新建 commitlint.config.js 文件
引入钩子 `husky` `lint-staged`
yarn add -D husky lint-staged
配置适配 引入`postcss`
# yarn add -D postcss-px-to-viewport postcss-loader
# yarn add -D lib-flexible postcss-pxtorem
使用适配方案一(postcss.config)
-----------------------------------------
const path = require("path");
const autoprefixer = require("autoprefixer");
module.exports = ({ file }) => {
const designWidth = file.dirname.includes(path.join("node_modules", "vant"))
? 375
: 750;
return {
plugins: {
"postcss-px-to-viewport": {
unitToConvert: "px",
viewportWidth: designWidth,
unitPrecision: 6,
propList: ["*"],
viewportUnit: "vw",
fontViewportUnit: "vw",
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: true,
exclude: [],
landscape: false
}
}
};
};
-----------------------------------------
使用适配方案二(postcss.config)
----------------------------------
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5, // Vant 官方根字体大小是 37.5
propList: ['*'],
selectorBlackList: ['.norem'], // 过滤掉.norem-开头的class,不进行rem转换
},
},
};
-----------------------------------------
原项目调整
修改 main.js ===>main.ts
新建 src/types 目录进入目录 新建 vue-app-env.d.ts
在 tsconfig.json 中配置 添加如下配置
"include": [ "src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue" ]
【注意事项】 修改根目录下 index.html 的引入 main.js--->main.ts
高阶配置
引入 dotenv 读取环境变量配置
yarn add -D dotenv
引入路由 vue-router
yarn add vue-router@4
VS Code Prettier + ESlint 格式化 Vue 代码及遇到问题
- Ant Design Vue Icon Component - 按需引入所需图标.
- Iconify - 使用任何图标集中的图标 Icônes
- PurgeIcons - 仅打包所使用到的图标.
- Vue Router Next
- Vuex Next
- vuex-module-decorators - vuex 模块化
- vite-plugin-mock - 基于 vite 的 mock 插件.
- vue-i18n - 国际化
- lodash-es - JavaScript 实用程序库
- axios - Http 数据交互
- TypeScript
Git
: - 版本管理工具Visual Studio Code
- (VSCode): 最新版本- VS Code Extensions
- Iconify IntelliSense
- Tailwind CSS IntelliSense - Tailwind Css 样式联想
- Vetur - vue 开发必备
- ESLint - 脚本代码检查
- Prettier - 代码格式化
- Stylelint - css 格式化
- VS Code Extensions
yarn serve
yarn build # 打包
yarn build:no-cache # 打包,执行之前会先删除缓存
yarn report # 生成构建包报表预览
yarn lint:stylelint # 样式格式化
yarn lint:prettier # js/ts代码格式化
### 其他
```bash
yarn reinstall # 删除依赖重新装,兼容window
yarn preview # 本地进行打包预览
yarn log # 生成CHANGELOG
yarn clean:cache # 删除缓存
yarn clean:lib # 删除node_modules,兼容window系统
## Git 提交规范
- 参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 规范 ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))
- `feat` 增加新功能
- `fix` 修复问题/BUG
- `style` 代码风格相关无影响运行结果的
- `perf` 优化/性能提升
- `refactor` 重构
- `revert` 撤销修改
- `test` 测试相关
- `docs` 文档/注释
- `chore` 依赖更新/脚手架配置修改等
- `workflow` 工作流改进
- `ci` 持续集成
- `types` 类型定义文件更改
- `wip` 开发中