写在前面
在接下来的一星期，要去做一个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,vue}"],
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语法的小伙伴，可以去看看下面这个文档，👉👉👉👉点我看看或者这里
未完待续
我们的项目新建以及安装基本依赖就到这里啦！！
下期开始，将会写在这个项目中遇到的问题，技术点，设计思路...
系列最后，会将项目地址以及源码发给小伙伴哦！
