Vite最近很流行。 是Vue作者特别专家发布的后端重构工具。 底层基于Rollup，无论是启动速度还是热加载速度都非常快。 Vite将与即将发布的vue3版本一起发布。 一开始是和vue绑定的，后来的v2版本就会相对独立了。 vite除了支持vue之外，还支持React、Preact、Vanilla等后端库。

由于vite出现时间不长，基于vite创建的项目并不像vue-cli那么完整。 如果要使用vue全家桶、ESLint等，需要开发者自动添加和配置。 步骤有点多，也有点复杂。 貌似创建项目的时候可以选择Customizewithcreate-vue，但是我还是因为网络问题没有成功。 于是我封装了一个cli来快速创建一个基于vite+vue3的项目。 如果你觉得一步步自动添加配置麻烦，可以使用我封装发布到npmjs的脚手架yyg-cli。 使用 yyg-cli 目前只有可以快速创建 Vite+Vue3 全家桶的项目，后续会逐步更新对其他库的支持。 可以直接到文末查看yyg-cli的使用。

本文将一步步使用vite创建一个vue3项目，集成vue全家桶，基于vue-cli实现项目的疗效。 整合的内容包括：

vue3+vite2

TypeScript、多伦多证券交易所

ESLint 标准

萨斯

Vue路由器

Pinia（状态管理）

ElementPlus（带图标全局注册）

1 创建项目 1.1 创建项目

我习惯使用yarn而不是npm作为包管理工具，个别依赖项用npm安装时会出现各种问题。 使用纱线创建项目：

yarn create vite

1）Projectname输入项目名称：vue3-vite-archetype

2）Selectaframework选择框架：Vue

3）Selectvariant选择变体（语言）：TypeScript

1.2 启动项目

项目创建完成后，按照命令行提示操作：

1）进入项目：cdvue3-vite-archetype

2）安装依赖：yarn

3）启动项目：yarndev

如果控制台出现如下信息，则说明项目启动成功。 在浏览器中访问台北地址：

2 项目配置 2.1 添加编辑器配置文件

在根目录添加编辑器配置文件：.editorconfig

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

2.2 配置别名

vue开发过程中，导入文件时，习惯使用@代替src，而vite默认是无法识别的，比如App.vue中的第4行（引入HelloWorld组件），如果改成：

import HelloWorld from '@/components/HelloWorld.vue'

会出现如下错误：

路径别名需要在vite.config.js中配置。

1）安装依赖：

 yarn add @types/node -D

2）导出路径

import path from 'path'

3）为导入的对象添加resolve：

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

同样，可以在alias中继续为常用目录定义其他别名。

不仅是前三步，还需要更改项目根目录下的tsconfig.json文件，在compilerOptions节点中添加两个属性来配置baseUrl和paths，如下：

{
  "compilerOptions": {
...
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
...
}

这个时候就不会报错了，可以在项目中用@来替换src。

2.3 处理sass/scss

例如，如果项目中使用了scss，则在App.vue中指定样式为lang="scss"：

此时会出现错误，提示没有找到sass依赖：

添加sass/scss支持，只需要安装sass开发依赖即可：

yarn add sass -D

2.4 处理tsx

1）添加开发依赖

yarn add @vitejs/plugin-vue-jsx -D

2）在vite.config.ts中配置插件

import vueJsx from '@vitejs/plugin-vue-jsx'
...
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
...
  ],
  ...
})

3 添加ESLint

ESLint主要用于代码规范和统一代码风格。

3.1 安装依赖

首先安装 eslint 作为开发依赖项：

yarn add eslint -D

3.2 初始化ESLint配置

然后执行初始化eslint的命令：

npx eslint --init

执行上述命令后，Control台北将有以下步骤：

1）需要安装@eslint/create-config，并询问是否继续：其实需要继续，回车即可；

2）ESLint怎么办：我选择最后的Tochecksyntax、findproblems、enforcecodestyle（检测句型、发现问题、强制代码风格）

3）使用哪种模块化方式：肯定选择JavaScriptmodules（导入/导出）（我参与的vue项目几乎都是ESModule）

4）项目使用哪些框架：Vue.js*

5）项目是否使用TypeScript：是

6）项目运行在哪些环境：浏览器

7）如何定义项目的代码风格：Useapopularstyleguide 使用流行风格

8) 选择流行款式之一：标准

9）ESLint配置文件格式：JavaScript

10）按照前面的选择，提示需要安装很多依赖，是否要安装？ 是的

11）选择要安装的包管理工具：yarn

拿出来耐心等待安装依赖。

依赖安装完成后，还会在项目根目录下手动生成.eslintrc.cjs文件（可以将后缀重命名为.js）。 因为eslint默认集成的vue规范比较旧，我们的项目是vue3，而vue3的句型规则发生了变化（例如template标签下可以允许多个节点等），这个变化会让eslint校准不适合vue3，所以需要改变eslint的部分配置，使其对vue3友好。 只需将 extends 中的 'plugin:vue/essential' 更改为 vue3 的 'plugin:vue/vue3-essential' 即可。

3.3 更改配置

更改后.eslintrc.cjs的配置如下：

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: [
    'vue',
    '@typescript-eslint'
  ],
  rules: {}
}

3.4 插件配置

上面的步骤已经完成了eslint的引入和配置，接下来就是配置vite的eslint插件，这个插件可以让vite知道项目的eslint配置。

1) 安装插件作为开发依赖项：

yarn add vite-plugin-eslint -D

2）在vite.config.js中添加插件：

//...
import eslint from 'vite-plugin-eslint'
export default defineConfig({
  plugins: [
    vue(),
    eslint()
  ],
//...
})

3.5 配置Webstorm

WebStorm 很好地支持 ESLint。 您可以在 WebStorm 中指定 ESLint 配置并手动更正它。 按照右图在WebStorm的Preferences中进行设置：

4 添加vue-router4.1安装依赖

安装 vue-router 依赖项：

yarn add vue-router@next

4.2 创建测试页

在src中创建目录views，并在src/views/中创建about.vue和home.vue两个文件。 两个vue文件的代码如下：

主页.vue：

  

    

      
        
      
      
        
      
    
    
  


import { defineComponent } from 'vue'
import HelloWorld from '@/components/HelloWorld.vue'
export default defineComponent({
  name: 'home',
  components: {
    HelloWorld
  }
})


.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

关于.vue：

  

    
This is an about page
  

4.3 配置路由

在src目录下创建目录router，并在src/router下创建index.ts文件，用于定义路由和创建路由对象。

src/路由器/index.ts：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/home.vue'
const routes: Array = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/about.vue')
  }
]
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
export default router

4.4 引入配置配置

更改 src/main.ts 以导入路由。 修改后内容如下：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')

4.5 添加插头

更改 src/App.vue，添加链接和路由插件：

  

    Home |
    About
  
  

样式也可以调整，修改src/style.css：

body {
  margin: 0;
  display: flex;
  min-width: 320px;
  min-height: 100vh;
}
#app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}
a {
  font-weight: 500;
  text-decoration: inherit;
}
a.router-link-exact-active {
  color: #42b983;
}
svg {
  width: 1em;
  height: 1em;
}

5 状态管理 Pinia

vue2中通常使用Vuex进行状态管理，vue3中推荐使用Pinia。 与vuex相比，Pinia的句型更加简洁，放弃了变异操作，更好地支持TypeScript，满足Vue3的Composition API。 它是最新一代的轻量级状态管理插件。 据尤大师介绍，vuex 将不再接受新功能，推荐使用 Pinia。

5.1 安装依赖

使用yarn安装pinia依赖项：

yarn add pinia

5.2 创建根存储

在 src/main.ts 中创建根存储 pinia 并将其传递给应用程序：

...
import { createPinia } from 'pinia'
...
app.use(createPinia())
...

5.3 定义商店

在src目录下创建storecss中划线，并在src/store下创建demo.ts文件。 在这个文件中，我们以CompositionAPI的形式实现store。

src/store/demo.ts：

import { defineStore } from 'pinia'
import { ref } from 'vue'
const useDemoStore = defineStore('demo', () => {
  const counter = ref(0)
  const increment = () => {
    counter.value++
  }
  return {
    counter,
    increment
  }
})
export default useDemoStore

5.4 使用商店

其中创建了一个store，然后在src/views/about.vue中使用该store：

  

    
This is an about page
    
counter: {{counter}}
    Ad Count
  


import useDemoStore from '@/store/demo'
import { storeToRefs } from 'pinia'
const demoStore = useDemoStore()
const { counter } = storeToRefs(demoStore)
const add = () => {
  demoStore.increment()
}

这样就实现了pinia状态管理的demo。 单击“关于”页面上的按钮将更改状态计数器的值。

6 使用Element Plus

ElementUI是一个非常常用的中后台管理界面的vueUI库，Vue3对应的版本叫做ElementPlus。

6.1 添加ElementPlus

1）安装依赖：

yarn add element-plus

2）在src/main.ts中引入：

...
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
...
app.use(ElementPlus)
...

3）替换about.vue中的button按键测试：

Ad Count

6.2 全局注册图标

在element-ui中，安装element-ui后可以直接使用图标，但element-plus需要单独安装依赖，并在使用图标时引入相应的图标组件。 我们可以进行简单的封装，使其与element-ui中的用法保持一致。

1）安装依赖：

yarn add @element-plus/icons-vue

2）在src下创建utils/str-utils.ts，定义驼峰命名法改为破折号命名的函数：

export const camelCaseToLine = (v: string): string => {
  return v.replace(/([A-Z])/g, '-$1').toLowerCase()
}

3）在src/main.ts中全局注册所有图标，使用方法：

...
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { camelCaseToLine } from '@/utils/str-utils'
...
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(`el-icon${camelCaseToLine(key)}`, component)
}
...

4）about.vue页面测试使用

使用图标替换之前的文字AddCount，效果如下：

至此css中划线，vite+vue3+vuerouter+pinia+elementplus的基本整合已经完成。 步骤很多且冗长。 您可以使用 yyg-cli 省略上述步骤。

7yyg-cli

yyg-cli实现了前面的步骤，只需要一条命令就可以创建一个vue3全家桶项目。

首先使用 npm 全局安装 yyg-cli：

npm install -g yyg-cli

全局安装成功后，使用yygcreate命令创建项目，例如创建名为demo的项目：

yyg create demo

输入此命令后，根据自己项目的需要，输入项目描述、版本号、作者、开发运行终端口号（都是可选的，直接回车即可）。

然后询问是否要立即依赖依赖，直接回车即可。 最后选择包管理工具，开始手动安装依赖。

依赖安装完成，进入项目根目录，yarndev就可以启动项目了。

yyg-cli 为您节省自动集成和配置的时间。 未来将推出对ant-d、hero-admin-ui等的支持，实现开箱即用，快速创建企业级中后端项目的基础框架。

为什么我们要培养自己的编码标准？

当我们编写代码时，良好的编码标准可以给我们带来很多意想不到的效果。 至少有以下好处：

1.提高我们的编码效率。 统一的代码方便我们复制粘贴！

2.提高代码的可读性。

3.展现我们的专业精神。 当别人听到我们的代码时，发现整个代码的书写过程工整、统一，颜值瞬间提升！

4、方便团队协作。 大家都使用同一个规范，杜绝了各种书写形式，统一协调！

编码规范由两块组成，代码规范和注释规范

其实我们写的php脚本其实是由两部分组成的，分别是代码的编写和代码的注释！ 不同的框架，甚至不同的公司，在这方面都会有不同的看法。 这里只是总结一下自己的写作规范！希望对其他同学有所启发

1. 代码编写规范

文件夹命名：

文件夹使用相同的小写字母。例如存放控制器的文件夹可以直接命名为controller

文件命名：

如果是class文件，那么文件的命名要与同一个类的名称一致，统一使用大驼峰。 如Session.class.php，对应的类名为Session，

如果是普通的工具脚本，则统一使用小驼峰，如common.php

类名的命名：

使用相同的大驼峰式大小写作为类名，Cookie 类

方法名称命名：

统一使用小驼峰式，技术的功能一般以动词+位置的形式描述，如sendMessage，发送电子邮件。

在面向对象中，遵循相同的规则，但存在一些差异：

public getUserName()
protected _getTotalAmount()
private _setBlanceAmount()

变量命名约定：

关于变量，我们需要多说几点：

1、无论是面向对象还是非面向对象句型，变量统一使用小驼峰式，如：$workYears。

但面向对象就不一样了，在添加public、protected、private、protected或private属性时，前面加_作为区别

public $startPosition = 1;
protected $_salaryAmount =1000;
private $_sex = 'formale';

2、如果是常量，统一使用小写，中间用逗号分隔。

define('CURRENT_SCRIPT', 'index.php');
const TRANSACTION_TYPE = 'income';

3.对于全局变量，使用大驼峰，在前缀中添加_，并将所有短语的第一个字母小写。 因为了解变量的作用域非常重要，所以局部变量和全局变量应该明确分开！

$_System_Config；

$_Root_Path；

缩进

关于编码的缩进符号，我们统一使用制表符进行缩进！ 也许有人会问为什么不用空格来缩进呢？

原因很简单。 大多数编辑器都支持一个tab等于多少个空格，使用空格时无需调整！

计算符号

所有二元运算符前后都应有空格

$name = 'zero';
$age > 18 ? 'adult' : 'children';

通用流程句子规划

我们同意所有过程语句的大括号占据一行。 原因：如果遇到比较复杂的业务逻辑，就会出现很多花括号的嵌套，所以我们会混淆各个对应的花括号！

1. 分支句

if($age >= 18 && $age  30 && $age  60)
{
 echo 'I am very old';
}
switch($status)
{
 case 'forbiden'：
 echo 'login forbidden';
 break;
 case 'normal':
 echo 'login in';
 break;
 default:
 echo 'status is wrong' ：
 break;
}

2.循环语句

while($condition)
{
 statesments......;
}
foreach($arrayList as $arrayKey => $arrayItem)
{
 states......;
}
do
{
 statements......; 
}
while($condition)
for($start; condition; changenumber)
{
 statements......;
}

2. 笔记书写规范

很多人说好的代码不需要注释。 其实我个人认为这是一个很无厘头的说法（也许他是对的，除非整个团队就他一个人，而且他做所有事情都不看别人的代码）。

我个人的观点是：多写笔记，无论是对团队中的其他人还是对自己都非常友好！

根据个人经验，评论至少有以下功能：

1、有利于增强代码的可读性。 毕竟，阅读你的评论比阅读你的代码容易得多！

2.有利于规划自己的代码布局！ 之所以这么说，是因为和代码注释的类型有关。 “有利于代码的布局”，这种看似有点悬而未决的东西，根本无法解释，需要真实的例子来支撑！

3、由于我们的注释规范是基于phpdocumentor的要求，所以通过这个工具，还可以生成代码的整体描述，相当于一本使用说明书！

代码注释的类型

1.屏蔽评论

块注释，个人觉得主要用在三个地方。php脚本的描述，一个大的功能模块的描述，当注释不能写在一行内时，也应该放在块注释中

2. 行注释

行评论，个人觉得他用的是块评论！ 一般用来描述一个大的功能模块的具体细节！

实际案例

关于phpdocumentor句型的具体使用细节，这里就不多说了，官网说得更清楚了

从前面的例子我们可以看一下代码的大致布局，但是还需要在实践中逐步摸索

下面附上一些php编程规范供大家参考。

1. 文件标记：

1、所有php文件的代码标签均使用完整的php标签css中划线，不建议使用短标签（短标签容易与xml混淆，php从5.4开始默认不支持短标签）。

2. 对于只有php的代码文件，建议省略末尾的'?>'。 这是为了避免多余的空格或其他字符影响代码。

2. 文件和目录命名

1.程序文件名和目录名以有意义的中文命名，不要使用拼音和无意义的字母，只允许字母、数字、下划线和破折号字符，并且必须以'.php'结尾（模板文件除外）css中划线，使用多个单词之间的驼峰式大小写。

示例： //统一使用类：DemoTest.class.php

//接口统一采用：DemoTest.interface.php

//其他根据各自方法：demoTest.{style}.php

3、文件目录结构

标准化的目录结构有利于团队协作开发和后期维护。

——app //独立应用程序

——class //单个类文件、共享类文件

——conf/inc //配置文件或目录

——data //数据文件或目录

——doc //程序相关文档

--htdocs //文档根目录

——images //所有图像文件存储路径

——css //css文件

——js //js文件

——lib //共享解释器

——template //模板文件

——tmp //临时文件目录

——cache //缓存文件

——session //SESSION文件

——template_c //编译后的模板文件

- 其他

——upload //上传文件

——manage //后台管理文件目录

4. 命名约定

1.变量命名：PHP中的变量是区分大小写的。 有效的变量名称以数字、字母或逗号开头，后跟任意数量的字母、数字和下划线。

a) 程序整体采用驼峰命名法，大写字母开头，且名称必须有意义。 （函数显示名称（））

b) PHP全局变量通配符两边有'_'，中间采用驼峰式命名。 ($_GLOBAL['_beginTime_'])

c) 普通变量整体使用驼峰式大小写，建议在变量前添加表示类型的前缀。 不确定类型以小写字符开头。

d) 函数名应尽可能有意义并尽可能缩写。

2. 类和套接字命名：

a) 以大写字母开头。

b) 由多个短语组成的变量名，单词之间没有空格，每个短语的首字母小写。

c) 类名与类文件名一致。

d) 程序中所有类名都是唯一的。

e) 抽象类应该以 Abstract 开头。

接口命名规则：

i) 使用与类相同的命名规则，但在其名称前添加“i”字符，表示套接字。

ii) 尽量使其与实现它的类名保持一致。

3、数据库命名：在数据库相关的命名中，绝对不会出现小写字母。

a) 所有表名均使用小写字母。

b) 表名使用相同的前缀且前缀不能为空。

c) 对于由多个短语组成的表名，请使用“_”间隔。

d) 表数组命名规则。

i) 全部使用小写字母。

ii) 多个短语不以逗号分隔。

iii) 用表名的第一个字母作为公共数组的前缀。

iv) 避免使用关键字和保留字。

5.注解规范

1、程序注释：写在代码的上面而不是旁边，单行代码按照习惯写在代码的最后； 大注释采用/**/的形式，通常位于文件或函数的底部，“//”用于代码内部； 评论不宜过多； 代码注释应该描述为什么而不是做什么，并为代码读者提供最重要的信息。

2、文件注释：文件注释通常放在文件的底部，包括程序的描述、作者、项目名称、文件名、时间日期、版本信息、重要使用说明（类调用、注意事项等） .)。 版本修改需要更改版本号并添加mofify注释。

3、类和socket注解：按照通常的做法，一个文件只包含一个类。

4、方法和函数注释：方法和函数的注释写在上面，通常需要表明信息的主要可见性、参数类型和返回值类型。

/**

* 连接数据库

* @param string $dbhost数据库服务器地址

* @param string $dbuser 数据库用户名

* @param string $dbpwd 数据库密码

*/

6. 代码风格

1、缩进和空格：使用4个空格进行缩进，不要使用Tab键； 可变参数时，等号两边留空格。 ($url = '$_GET['url']';)

2、语句换行：尽量保证程序语句一行一句； 一行代码尽量不要太长，80个字符以内； 如果某行代码过长，请使用类似于“.=”的方法来断开连接； 执行数据库的sql 操作语句时，尽量不要在函数中编写sql语句，而是先用变量定义sql语句，然后在执行操作的函数中调用定义的变量。

3.更好的习惯：在代码中使用下面列出的方法，让代码变得更加高贵。

1）：使用更多PHP中已经存在的常量，而不是自己定义它们。

示例： //换行

回显 $msg."rn";

回显 $msg,PHP_EOL;

PHP_EOL是php中预定义的常量，表示一行的结束。 根据所使用的系统，使用 PHP_EOL 的代码可移植性更高

2): 在echo中使用冒号作为连接符比使用'.'更美观作为连接器代码。

3）：单冒号的效率比双引号低，但是两者的使用有区别，学会使用printf函数。

示例：//回显

echo '每个'.$scholl。' 有大约“.floor($avg)”。 中学生；

//打印

$format = '每%s个小于$d个中学生';

printf($format, $school, $avg);

4) : 详细注释

5）：不要滥用句型糖，语法糖是语言中的潜规则，即不具有普遍代表性的句型。

举两个反例，如何写出好的代码

最经典的算法，献给笔试路上的你

如果你现在正走在PHP笔试的路上，先看看笔试的基础题