[email protected] |
您所在的位置：网站首页 › 埃尔米特变换 › [email protected] |
|
写在前面
在接下来的一星期，要去做一个Vue2的项目，我们的项目名叫Arco ,是一个内部项目管理系统，图贴下边啦！！ 或许，很多小伙伴，一看到这一个项目，就会说："咦~这么简单的一个项目，那不是手到擒来嘛！" 哈哈！！不急，慢慢往下看，我会将在这个项目中用到的依赖，技术点，难点都会逐步更新到下边，不会的小伙伴，@我哦！！ GO!!当我们接到一个新项目，首先肯定要去，看大致需求，新建项目哇！ 项目需求依赖如下： 编程语言：TypeScript 4.x + JavaScript 构建工具：VueCli5.x 前端框架：Vue 2.x 路由工具：Vue Router 3.x 状态管理：Vuex 3.x UI 框架：Element-UI CSS 预编译：Stylus / Sass / Less HTTP 工具：Axios Git Hook 工具：husky + lint-staged 代码规范：EditorConfig + Prettier + ESLint + Airbnb JavaScript Style Guide 提交规范：Commitizen + Commitlint 原子化：tailwindcss 组件语法：SFC、JSX 复制代码1. 搭建一个完整的Vue2项目 打开命令窗口，安装vue-cli脚手架，可以使用如下命令安装: vue-cli官方网址 npm install -g @vue/cli or yarn global add @vue/cli 复制代码 键入以下命令创建项目 vue create demoName 复制代码或者使用官方的图形化界面 vue ui 复制代码上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。 然后，就可以根据自己的需求，很容易创建项目啦，这里不再赘述 引入Element UI 官方地址 因为这个项目需要使用element ui 组件框架，所以 我们可以使用以下命令在项目中，安装element ui pnpm add element-ui -D 复制代码 在main.js全局导入或按需导入全局导入会一次性将element ui 中的所有组件方法全部导入，让我们可以在项目中任何地方，想用即用。缺点是：这会导致引入很多有时候我们用不到的组件，导致我们的项目运行性能较差，需要较高的消耗， 按需导入：就是将我们需要用到的组件，一个个导入进来，然后挂载到全局Vue实例上。拥有较低的性能消耗，但是前期的开发成本会相应增强。 全局导入 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI) 复制代码按需导入 import { Form, FormItem, Input, Checkbox, Button, Message, Tabs, TabPane, Menu, MenuItem, } from "element-ui"; //挂载 Vue.use(Form) .use(Input) .use(FormItem) .use(Checkbox) .use(Button) .use(Tabs) .use(TabPane) .use(Menu) .use(MenuItem); 复制代码遇到的问题 当我们使用按需导入后，Element UI 的样式会丢失，导致我们的组件不能正常显示， 当然，官方给我们提供了解决办法 我们只需要下载一个插件即可 babel-plugin-component 单独引入样式 pnpm add babel-plugin-component -D 复制代码配置样式表 然后，将babel.config.js 修改为： { "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] } 复制代码做到这些，我们就可以正常使用 Element 组件啦！ HTTP 工具：Axios 点这里看官方文档 pnpm add axios 复制代码4.引入原子化css tailwindCss 点这里看官方文档 安装依赖 npm i tailwindcss -D 3.2.7 npm i postcss -D 8.4.21 npm i postcss-loader -D 4.3.0 复制代码新建文件postcss.config.js module.exports = { plugins:[require("tailwindcss")] } 复制代码初始化生成文件 npx tailwindcss init 复制代码全局引入 import "tailwindcss/tailwind.css" 复制代码遇到的问题 虽然我们按照以往的节奏正常引入了，但还是没有效果， 其实，有可能是引入路径出现了问题： 我们需要去，初始化tailwindcss 自动生成的文件tailwind.config.js里修改其引入路径 module.exports = { content: ["./src/**/*.{html,js,jsx,tsx}"], corePlugins: { preflight: false, }, purge: [], darkMode: false, // or 'media' or 'class' theme: { extend: { width: { "400px": "400px", }, }, }, variants: { extend: {}, }, plugins: [], }; 复制代码 git仓库提交规范由于项目往往不是由我们一个人完成的，而是一个团队共同完成，这时候，提交代码就需要一套规范规则去约束我们 于是，就有了commitizen,地上原本没有路，走的人多了，也便成了路 安装依赖： ①npm i commitizen -D ②npx commitizen init cz-conventional-changelog --save-dev --save-exact ③npx commitizen init cz-customizable --save-dev --save-exact --force 复制代码新建 .cz-config.js 文件,并复制粘贴以下代码： module.exports = { types: [ { value: 'feat', name: 'feat: 新增功能' }, { value: 'fix', name: 'fix: 修复 bug' }, { value: 'docs', name: 'docs: 文档变更' }, { value: 'style', name: 'style: 代码格式（不影响功能，例如空格、分号等格式修正）' }, { value: 'refactor', name: 'refactor: 代码重构（不包括 bug 修复、功能新增）' }, { value: 'perf', name: 'perf: 性能优化' }, { value: 'test', name: 'test: 添加、修改测试用例' }, { value: 'build', name: 'build: 构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）' }, { value: 'ci', name: 'ci: 修改 CI 配置、脚本' }, { value: 'chore', name: 'chore: 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）' }, { value: 'revert', name: 'revert: 回滚 commit' } ], // scope 类型（定义之后，可通过上下键选择） scopes: [ ['views', '页面相关'], ['components', '组件相关'], ['hooks', 'hook 相关'], ['utils', 'utils 相关'], ['antd', '对 antd 的调整'], ['styles', '样式相关'], ['deps', '项目依赖'], ['auth', '对 auth 修改'], ['other', '其他修改'], ['router', '路由相关'], // 如果选择 custom，后面会让你再输入一个自定义的 scope。也可以不设置此项，把后面的 allowCustomScopes 设置为 true ['custom', '以上都不是？我要自定义'] ].map(([value, description]) => { return { value, name: `${value.padEnd(30)} (${description})` } }), // 是否允许自定义填写 scope，在 scope 选择的时候，会有 empty 和 custom 可以选择。 allowCustomScopes: true, // allowTicketNumber: false, // isTicketNumberRequired: false, // ticketNumberPrefix: 'TICKET-', // ticketNumberRegExp: '\\d{1,5}', // 针对每一个 type 去定义对应的 scopes，例如 fix /* scopeOverrides: { fix: [ { name: 'merge' }, { name: 'style' }, { name: 'e2eTest' }, { name: 'unitTest' } ] }, */ // 交互提示信息 messages: { type: '确保本次提交遵循 Angular 规范！\n选择你要提交的类型：', scope: '\n选择一个 scope（可选）：', // 选择 scope: custom 时会出下面的提示 customScope: '请输入自定义的 scope：', subject: `请填写简短精炼的提交描述,例如:" 修复微信小程序 d3 模块的编译报错"：\n`, body: '填写更加详细的变更描述（可选）。使用 "|" 换行：\n', breaking: '列举非兼容性重大的变更（可选）：\n', footer: `通过commit关联（link）、关闭（close）任务 (#issue_ident / issue_url)`, confirmCommit: '确认提交？' }, // 设置只有 type 选择了 feat 或 fix，才询问 breaking message allowBreakingChanges: ['feat', 'fix'], // 跳过要询问的步骤 // skipQuestions: ['body', 'footer'], // subject 限制长度 subjectLimit: 100, breaklineChar: '|', // 支持 body 和 footer footerPrefix: '' // askForBreakingChangeFirst : true, } 复制代码那么，我们上传提交代码到git仓库的过程就会变成： ①git add . ②git cz ③弹出后--> feat:新增功能《other》 -->《新增一个XXX功能》 列举非兼容性重大的变更《直接回车》 确认提交《直接回车》 复制代码6.Git Hook 工具：husky + lint-staged 这里内容太多，我就粘链接在下面啦 链接 因为我们原先写vue，是直接使用SFC语法，也就是template + script +style,但是，这个项目要求我们舍弃SFC语法，而是使用JSX语法，并且，文件后缀要求是tsx 也就是说，我们要将原有的模板语法，修改成为导出render函数的形式，该函数返回什么浏览器就渲染什么 ，其实感觉像是在Vue里面写React,哈哈哈！这里如果不熟悉JSX语法的小伙伴，可以去看看下面这个文档，👉👉👉👉点我看看或者这里 未完待续我们的项目新建以及安装基本依赖就到这里啦！！ 下期开始，将会写在这个项目中遇到的问题，技术点，设计思路... 系列最后，会将项目地址以及源码发给小伙伴哦！ 如果你不知道未来的路将会是怎么样，别怕，朝着你认为对的方向坚持走下去，沿路见证曾经与你同行的朋友的起伏，最后，你一定会发现，哇！原来我已经走了这么远了. |
【本文地址】