1、为何构建新项目？
小白最近接到部门需求，要将小程序里的一些静态原生页分离到H5，内嵌webview展示。刚好当下vue3+vite比较火，于是决定尝鲜。
2、要不要选择typescript？
由于是一些静态小页面，没有太多的复杂逻辑以及功能单一，故没有必要上typescript。强行支持反而加大开发量。
3、话不多说，开始搞起！
首先打开vite官网：vite官网 发现vite需要Node.js版本 >= 12.0.0。刚好小白nodejs版本12.22.1。完美、perfect!
第一步：
npm init vite@latest
然后按照提示填写项目名、选择js框架，我这边选择vue。 成功之后目录结构如下：
可以看到最简洁的vite+vue3项目就初始化好了。
第二步：
添加vue-router
npm install vue-router@4
然后在src目录下新建router文件夹，添加index.js，再新建views文件夹，存放页面。（这里我新建了index页面）。
在main.js中引入路由
最后把app.vue里面模板的东西都删掉，添加router-view，这样路由这边基本上就ok了。
第三步：
引入vant
npm install vant
vant官网推荐vite项目中安装vite-plugin-style-import插件，它可以自动按需引入组件样式。
npm install vite-plugin-style-import@1.4.1 -D
安装好后，在vite.config.js文件中配置插件：
import vue from '@vitejs/plugin-vue';
import styleImport, { VantResolve } from 'vite-plugin-style-import';
export default {
plugins: [
vue(),
styleImport({ resolves: [VantResolve()], }),
],
};
在页面中使用方式：(这里script标签上的setup是vue3的语法糖，组件导入进来会自动注册。所以我这里就可以直接使用了。)
第四步：
添加大菠萝！pinia（这里放弃使用vuex,尝鲜大菠萝）
npm install pinia -S
首先在main.js下引入pinia
然后在src目录下新建store文件夹，添加index.js
这样基本上初始化就ok了，pinia使用方法，参考官网：pinia
第五步：
由于是移动端H5应用，这里要添加CSS相关插件：
1、添加视口转换插件postcss-px-to-viewport
npm install -D postcss-px-to-viewport
2、添加less(这里安装开发依赖后，在.vue文件style标签上就可以直接通过lang='less'使用了。
npm install -D less
3、添加autoprefixer，给一些css属性自动添加厂商前缀的。
npm install -D autoprefixer
4、配置vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport, { VantResolve } from 'vite-plugin-style-import';
import pxtovw from 'postcss-px-to-viewport'
import autoprefixer from 'autoprefixer'
export default defineConfig({
css: {
postcss: {
plugins: [
autoprefixer({
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 11",
'last 10 versions', // 所有主流浏览器最近2个版本
],
grid: true
}),
pxtovw({
unitToConvert: 'px', //需要转换的单位，默认为"px"
viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度
viewportHeight: 1334, //视窗的高度，根据375设备的宽度来指定，一般指定667，也可以不配置
unitPrecision: 5, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
propList: ['*'], // 能转化为vw的属性列表
viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
fontViewportUnit: 'vw', //字体使用的视口单位
selectorBlackList: ['.ignore-', '.hairlines'], //指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
mediaQuery: false, // 允许在媒体查询中转换`px`
replace: true, //是否直接更换属性值，而不添加备用属性
exclude: [], //忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
landscape: false, //是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
landscapeUnit: 'vw', //横屏时使用的单位
landscapeWidth: 1134 //横屏时使用的视口宽度
})
],
}
},
plugins: [
vue(),
styleImport({ resolves: [VantResolve()], })
]
})
然后你启动应用后就会发现，你定义的px都会自动转换成vw、vh等视口单位。一些兼容性的css3属性也会自动添加厂商前缀。
第六步：
1、配置代码检查：eslint+prettier
npm i eslint eslint-plugin-vue -D
npm i prettier eslint-config-prettier eslint-plugin-prettier -D
同时使用prettier和eslint，会存在一些冲突，所以需要将eslint的一些可能与prettier发生冲突的代码格式化规则关闭。这里使用eslint-plugin-prettier和eslint-config-prettier。
2、在项目根目录下添加.eslintrc.js、.eslintignore、.prettierrc.js
//.eslintrc.js 文件
module.exports = {
extends: [
'plugin:vue/vue3-recommended',
'prettier',
'plugin:prettier/recommended'
],
rules: {
// override/add rules settings here, such as:
"prettier/prettier": "error"
}
};
//.eslintignore文件
node_modules/
dist/
index.html
//.prettierrc.js文件
module.exports = {
// 一行最多 80 字符
printWidth: 80,
// 使用 4 个空格缩进
tabWidth: 4,
// 不使用 tab 缩进，而使用空格
useTabs: false,
// 行尾需要有分号
semi: false,
// 使用单引号代替双引号
singleQuote: true,
// 对象的 key 仅在必要时用引号
quoteProps: 'as-needed',
// jsx 不使用单引号，而使用双引号
jsxSingleQuote: false,
// 末尾使用逗号
trailingComma: 'all',
// 大括号内的首尾需要空格 { foo: bar }
bracketSpacing: true,
// jsx 标签的反尖括号需要换行
jsxBracketSameLine: false,
// 箭头函数，只有一个参数的时候，也需要括号
arrowParens: 'always',
// 每个文件格式化的范围是文件的全部内容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要写文件开头的 @prettier
requirePragma: false,
// 不需要自动在文件开头插入 @prettier
insertPragma: false,
// 使用默认的折行标准
proseWrap: 'preserve',
// 根据显示样式决定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
// 换行符使用 lf
endOfLine: 'auto'
}
然后在package.json文件script里添加指令eslint和prettier。
{
"name": "my-vite-vue3",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"eslint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
"prettier": "prettier --write \"src/**/*.js\" \"src/**/*.vue\""
},
"dependencies": {
"pinia": "^2.0.13",
"vant": "^3.4.8",
"vue": "^3.2.25",
"vue-router": "^4.0.14"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.3.1",
"autoprefixer": "^10.4.5",
"eslint": "^8.14.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^7.0.0-beta.4",
"less": "^4.1.2",
"postcss-px-to-viewport": "^1.1.1",
"prettier": "^2.6.2",
"vite": "^2.9.5",
"vite-plugin-style-import": "^1.4.1"
}
}
这样以后执行npm run eslint和npm run prettier就可以格式化src目录下的代码了。
