安装脚手架
1 安装配置前准备的工作
0 在搭建vue的开发环境之前首先要安装node.js(详情参考菜鸟教程的node安装)
1.1 安装完成node后 打开docs管理工具 看是否安装成功 输入**node-v** 回车 查看安装的版本号
1.2 安装cnpm(简称淘宝镜像) 的命令 因为npm的命令运行速度慢 推荐cnpm进行操作 输入**$ npm install -g cnpm -- registry=https://registry.npm.taobao.org** 进行安装
1.21 如果想使用yarn命令 可以全局安装一下
npm install -g yarn
1.3 cnpm(简称淘宝镜像) 安装成功后 我们可以全局使用vue-cli脚手架，可以使用下列任一命令安装这个 新的包
npm install -g @vue/cli 使用npm命令使用这个
yarn global add @vue/cli 使用yarn命令使用这个
验证是否安装成功，在命令输入vue，出来vue的信息，及说明安装成功
当然了如果你想快速安装记得在前面加cnpm
安装完后可以用 vue --version来查看安装的版本
1.4 然后创建vue的项目
(找到vue.js官网->生态系统->vue cli->点击启步->找到安装->找到创建一个项目)
如果一直创建不成功 可以window+r 输入cmd回车 试下
手动安装(默认webpack)
2准备安装工作
2种方法
一种选择ts
一种不选择ts（基础条件是选择3开发）
1 首先打开你要进行写的项目所在的文件夹
2 按shifrt +c (在此处打开窗口) 然后进行写命令
当输入命令报错时 输入个cmd enter一下 试试
我们这里的安装是手动安装 选择手动
1 vue create(项目名称) 创建Vue项目 项目名称不可使用中文
出现二个选项 （1）.（default(babel,eslint)）默认搭建项目配置
（2）.（manally select features）自定义搭建项目配置
1
如果安装选择ts语法来写
后缀名为ts，然后进行开发(生成的代码都是ts来写的)
2
如果安装不选择ts语法开发，选择了js
必然也可以在.vue页面使用setup来进行开发
使用自定义搭建项目配置(利用上下键切换选项) 选中自定义后点击 按enter确认
最后选择版本我们使用vue3.0版本安装
如果上下建不可以切换选项，我们需要使用winpty vue.cmd create 你要自定义的名称 这个命令
2 然后出现一些配置选项 只选择babel router
按空格选着选中不 按上下键选着 小括号中有星号表示选中
确认选中后点击enter
3 出现是否使用 history模式 use history mode for router
如果项目没有说明使用history模式 则我们不使用history模式 所以选着no 然后点击enter
4 接下来出现的选项选着哪个都可以 直接点击enter也可以
5 接下来一直enter就可以
最后如果出现 cd项目名称 yarn serve/npm run serve都表示项目搭建成功
}
安装成功后的准备工作
内容讲解
//前提条件都要勾选vue3开发的基础下
1
如果安装选择ts语法来写如下所示
后缀名为ts，然后进行开发(使用ts语法)
2
如果安装不选择ts语法开发，选择了js
必然也可以在.vue页面使用setup来进行开发
src里面的
main.ts入口文件
shims-vue.d.ts这个是定义文件 让ts认识vue的这些东东
创建好进行优化一下
安装完成后并不能直接使用，
我们要删除多余的官方配置来进行使用。
assets文件
把assets里面的logo删除
把assets里面的logo删除
删除app.vue里面的style数据 只保留
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div> //把这些删掉
home文件
home文件
<template>
<div class="home">
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'Home',
});
</script>
components文件夹
然后把components里的helloworld.vue删除
router文件夹
然后在路由里面router删除index的一些内容
把这一部分删除就是下面的代码
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
然后在view文件夹里面删除about.vue文件 整个文档删除
vue.config.js文件
module.exports = {
devServer: {
host: 'localhost',
port: 8080,//设置默认启动端口号
open: true//自动打开浏览器
}
}
然后一个项目就诞生了
Eslink校验
Vscode安装相应的插件
1 安装eslint
npm install eslint -D
yarn add eslint -D
pnpm install eslint -D
2 生成配置文件
npx eslint --init
3 修改.eslint.cjs配置文件
// @see https://eslint.bootcss.com/docs/rules/
module.exports = {
env: {
browser: true,//浏览器端
es2021: true,
node: true,
jest: true,
},
/* 指定如何解析语法 */
parser: 'vue-eslint-parser',
/** 优先级低于 parse 的语法解析配置 */
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
parser: '@typescript-eslint/parser',
jsxPragma: 'React',
ecmaFeatures: {
jsx: true,
},
},
/* 继承已有的规则 */
extends: [
'eslint:recommended',//函数不能重名 对象不能出现重复key
'plugin:vue/vue3-essential',//Vue3语法规则
'plugin:@typescript-eslint/recommended',//ts语法规则
'plugin:prettier/recommended',
],
plugins: ['vue', '@typescript-eslint'],//检测vue ts插件
/*
* "off" 或 0 ==> 关闭规则
* "warn" 或 1 ==> 打开的规则作为警告（不影响代码执行）
* "error" 或 2 ==> 规则作为一个错误（代码不能执行，界面报错）
*/
rules: {
// eslint（https://eslint.bootcss.com/docs/rules/）
'no-var': 'error', // 要求使用 let 或 const 而不是 var
'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-unexpected-multiline': 'error', // 禁止空余的多行
'no-useless-escape': 'off', // 禁止不必要的转义字符
// typeScript (https://typescript-eslint.io/rules)
'@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
'@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore
'@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。
'@typescript-eslint/semi': 'off',
// eslint-plugin-vue (https://eslint.vuejs.org/rules/)
'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词
'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用
'vue/no-mutating-props': 'off', // 不允许组件 prop的改变
'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式
},
}
.eslintignore忽略文件
然后在同级目录下安装一个创建一个 .eslintignore忽略文件 ，目的是让 eslint 忽略某些文件中的配置，创建好后写入：
dist
node_modules
运行脚本
package.json新增两个运行脚本
"scripts": {
"lint": "eslint src",//校验错误
"fix": "eslint src --fix",//修复错误
}
prettier格式化工具
有了eslint，为什么还要有prettier？eslint针对的是javascript，他是一个检测工具，包含js语法以及少部分格式问题，在eslint看来，语法对了就能保证代码正常运行，格式问题属于其次；
而prettier属于格式化工具，它看不惯格式不统一，所以它就把eslint没干好的事接着干，另外，prettier支持
包含js在内的多种语言。
总结起来，eslint和prettier这俩兄弟一个保证js代码质量，一个保证代码美观。
VS Code安装其对应的插件
安装依赖包
npm install -D eslint-plugin-prettier prettier eslint-config-prettier
yarn add -D eslint-plugin-prettier prettier eslint-config-prettier
pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier
同样是在src同级目录下安装.prettierrc.json文件夹
.prettierrc.json添加规则
{
"printWidth": 120,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,
"bracketSpacing": true,
"trailingComma": "all",
"jsxSingleQuote": false,
"arrowParens": "avoid",
"proseWrap": "preserve",
"htmlWhitespaceSensitivity": "strict",
"endOfLine": "auto"
}
.prettierignore忽略文件
/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*
通过npm run lint去检测语法，如果出现不规范格式,通过npm run fix 修改
Vue3 项目中如何关闭 ESLint
styleLint工具配置
stylelint为css的lint工具。可格式化css代码，检查css语法错误与不合理的写法，指定css书写顺序等。
我们的项目中使用scss作为预处理器，安装以下依赖：
// sass sass-loader可单独安装
npm add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D
.stylelintrc.cjs配置文件
官网:https://stylelint.bootcss.com/
// @see https://stylelint.bootcss.com/
module.exports = {
extends: [
'stylelint-config-standard', // 配置stylelint拓展插件
'stylelint-config-html/vue', // 配置 vue 中 template 样式格式化
'stylelint-config-standard-scss', // 配置stylelint scss插件
'stylelint-config-recommended-vue/scss', // 配置 vue 中 scss 样式格式化
'stylelint-config-recess-order', // 配置stylelint css属性书写顺序插件,
'stylelint-config-prettier', // 配置stylelint和prettier兼容
],
overrides: [
{
files: ['**/*.(scss|css|vue|html)'],
customSyntax: 'postcss-scss',
},
{
files: ['**/*.(html|vue)'],
customSyntax: 'postcss-html',
},
],
ignoreFiles: [
'**/*.js',
'**/*.jsx',
'**/*.tsx',
'**/*.ts',
'**/*.json',
'**/*.md',
'**/*.yaml',
],
/**
* null => 关闭该规则
* always => 必须
*/
rules: {
'value-keyword-case': null, // 在 css 中使用 v-bind，不报错
'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
'function-url-quotes': 'always', // 要求或禁止 URL 的引号 "always(必须加上引号)"|"never(没有引号)"
'no-empty-source': null, // 关闭禁止空源码
'selector-class-pattern': null, // 关闭强制选择器类名的格式
'property-no-unknown': null, // 禁止未知的属性(true 为不允许)
'block-opening-brace-space-before': 'always', //大括号之前必须有一个空格或不能有空白符
'value-no-vendor-prefix': null, // 关闭 属性值前缀 --webkit-box
'property-no-vendor-prefix': null, // 关闭 属性前缀 -webkit-mask
'selector-pseudo-class-no-unknown': [
// 不允许未知的选择器
true,
{
ignorePseudoClasses: ['global', 'v-deep', 'deep'], // 忽略属性，修改element默认样式的时候能使用到
},
],
},
}
.stylelintignore忽略文件 PS根目录创建
/node_modules/*
/dist/*
/html/*
/public/*
运行脚本
// 最后配置统一的prettier来格式化我们的js和css，html代码
"dev": "vite --open",
"build": "vue-tsc && vite build",
"preview": "vite preview",
"lint": "eslint src",
"fix": "eslint src --fix",
"format": "prettier --write \"./**/*,
"lint:eslint": "eslint src/**/*.{ts,vue} --cache --fix",
"lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix"
当我们运行pnpm run format的时候，会把代码直接格式化
husky配置
在团队协作中，往往需要使用到git来进行代码版本的管理，然而在执行提交命令之前，我们需要执行一些格式化操作（esLint、styLelint、prettier等），每次提交都手动执行这些，显然是浪费时间的，如果想在 git 执行命令前，自动执行格式化，那么就需要用到husky
安装Husky
# 安装依赖
npm install --save-dev husky
# 初始化
npx husky init
lint-staged
执行完初始化会在项目根目录生成.husky文件夹。安装lint-staged
npm install -D lint-staged
package.json
在package.json的scripts下中添加如下代码：
{
// 添加 lint:lint-staged 命令
"scripts": {
"lint:lint-staged": "lint-staged",
},
// lint-staged 配置
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"eslint --fix",
"prettier --write"
],
"{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
"prettier --write--parser json"
],
"package.json": [
"prettier --write"
],
"*.vue": [
"eslint --fix",
"prettier --write",
"stylelint --fix"
],
"*.{scss,less,styl,html}": [
"stylelint --fix",
"prettier --write"
],
"*.md": [
"prettier --write"
]
}
}
pre-commit
在.husky → pre-commit文件中添加想要执行的命令
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm run lint:lint-staged
接下来可以进行提交了，提交前会自动对代码进行校验！
commitLint配置
commit 信息校验工具 提交信息规范
安装需要配合以下操作
安装
需要先保证安装过依赖 husky
npm install --save-dev husky
安装@commitlint/config-conventional @commitlint/cli
npm install --save-dev @commitlint/config-conventional @commitlint/cli
创建 commitlint.config.js 配置文件
echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js
在husky的配置加入CommitlIint配置，v1.0.1版本以后为HUSKY_GIT_PARAMS，v0.14.3为GIT_PARAMS
"husky": {
"hooks": {
"commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"
}
},
提交规范
type ：用于表明我们这次提交的改动类型，是新增了功能？还是修改了测试代码？又或者是更新了文档？总结以下 11 种类型：
build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交
ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交
docs：文档更新
feat：新增功能
fix：bug 修复
perf：性能优化
refactor：重构代码(既没有新增功能，也没有修复 bug)
style：不影响程序逻辑的代码修改(修改空白字符，补全缺失的分号等)
test：新增测试用例或是更新现有测试
revert：回滚某个更早之前的提交
chore：不属于以上类型的其他类型(日常事务)
optional scope：一个可选的修改范围。用于标识此次提交主要涉及到代码中哪个模块。
description：一句话描述此次提交的主要内容，做到言简意赅。
列子:
git commit -m 'feat: 增加 xxx 功能'
git commit -m 'bug: 修复 xxx 功能'
commitlint.config.js文件配置
subject是 commit 目的的简短描述，可以做一些配置，如最大长度限制。
rule配置说明:：rule由name和配置数组组成，如：'name:[0, 'always', 72]'，数组中第一位为level，可选0,1,2，0为disable，1为warning，2为error，第二位为应用与否，可选always|never，第三位该rule的值。具体配置例子如下：
module.exports = {
extends: [
"@commitlint/config-conventional"
],
rules: {
'type-enum': [2, 'always', [
'upd', 'feat', 'fix', 'refactor', 'docs', 'chore', 'style', 'revert'
]],
'type-case': [0],
'type-empty': [0],
'scope-empty': [0],
'scope-case': [0],
'subject-full-stop': [0, 'never'],
'subject-case': [0, 'never'],
'header-max-length': [0, 'always', 72]
}
};
统一包管理工具下载依赖
vue3+ts项目
在根目录创建scritps/preinstall.js
if(!/npm/.test(process.env.npm_execpath||'')){
console.warn(
`\u001b[33mThis repository must using npn as the package manager`+
`for scripts to work properly.\u001b[39m\n`,
)
process.exit(1)
}
package.json中配置命令
"preinstall":"node ./scripts/preinstall.js"
当使用yarn或pnpm来安装包的时候就会报错，因为install 的时候会触发preinstall（npm提供的生命周期钩子）
_src文件夹别名配置
src文件设置以@方式引入
用webpack构建的项目
1 在项目新建vue.config.js,编辑vue.config.js内容如下：
const path = require('path');
module.exports = {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
};
如果引入path的报错的话可能时缺少依赖
npm i @types/node --dev
PS：
使用 webpack 构建的项目在配置路径别名时通常需要引入 path 模块，因为 webpack 的配置文件中需要使用 path.resolve() 方法来处理路径。
使用vite构建的项目
在vite.config.js中进行别名的配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': '/src'
}
}
})
//这样，你就可以使用@作为别名来引用/src目录下的文件。
/*
如果你已经正确配置了别名，但仍然无法使用@别名，可能是由于编辑器的配置问题。有些编辑器（如VS Code）需要额外的配置才能正确识别别名。你可以尝试在项目根目录下创建一个jsconfig.json文件，并添加以下内容：
*/
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}
//这样，编辑器就能正确识别@别名
环境变量配置
配置开发测试生产
与scr同级创建3个文件 如下所示
.env.development
//开发
VITE_APP_DEV = "dev-api"
VITE_APP_URL = "http://192.168.0.0.1/api"
.env.production
VUE_APP_ENV="production"
VUE_APP_API_URL="http://localhost:3000"
.env.test
VUE_APP_ENV="test"
VUE_APP_API_URL="http://localhost:9000"
svg图标封装使用
在这里插入代码片
自定义插件svg全局组件
在这里插入代码片
mock模拟数据
Vite安装
vite项目 node版本要16+ 有些模块需要依赖node才可以进行
报错的话请更新版本
vite官网
https://cn.vitejs.dev/guide/
vite.config.js
export default defineConfig({
server: {
open: true,//运行自动打开浏览器
port: 9090//运行地址
},
})
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
