搭建项目
前提条件：已安装 16.0 或更高版本的 Node.js
- 第一步: 在需要创建项目文件目录下打开
cmd运行以下命令，这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。
npm init vue@latest
- 第二步: 你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示，根据需求选择性添加
✔ Project name: … <your-project-name> //项目名称
✔ Add TypeScript? … No / Yes //是否使用typeScript
✔ Add JSX Support? … No / Yes //是否使用JSX
✔ Add Vue Router for Single Page Application development? … No / Yes //是否使用路由
✔ Add Pinia for state management? … No / Yes //是否使用pinia状态管理
✔ Add Vitest for Unit testing? … No / Yes //是否添加单元测试
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes //是否添加端到端测试
✔ Add ESLint for code quality? … No / Yes //是否使用ESLint来进行代码质量检查
✔ Add Prettier for code formatting? … No / Yes //是否使用Prettier对代码风格进行规范
- 第三步:
cd到项目文件夹，安装依赖，启动项目
cd <your-project-name>
npm install
npm run dev
安装vant
npm i vant
rem适配方案
Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具:
- [postcss-pxtorem]是一款
postcss插件，用于将单位转化为rem - [lib-flexible]用于设置
rem基准值
- 安装postcss-pxtorem和lib-flexible
npm i postcss-pxtorem lib-flexible
- 在main.ts引入lib-flexible：
import "lib-flexible"; - 新建postcss.config.js并配置
// 新建postcss.config.js并配置
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*'],
},
},
};
配置后会报错'module' is not defined.eslint
需在.eslintrc.cjs文件中配置
env: {
node: true,
},
配置 css 预处理器 scss
虽然 vite 原生支持 less/sass/scss/stylus，但是你必须手动安装他们的预处理器依赖，安装后即可使用
npm install sass --save-dev
axios
npm i axios
.vue文件报错：Component name "Home" should always be multi-word.eslint
根据官方风格指南，除了根组件（App.vue）外，自定义组件名称应该由多单词组成，防止和html标签冲突。
解决方案： 修改组件名为多个单词，使用大驼峰命名方式或者用“-”连接单词。如果真的想组件名为单个单词，需在.eslintrc.cjs文件中配置
rules:{
"vue/multi-word-component-names": "off",
},
环境变量配置
Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量：
import.meta.env.MODE: {string} 应用运行的模式。import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base配置项决定。import.meta.env.PROD: {boolean} 应用是否运行在生产环境。import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与import.meta.env.PROD相反)。import.meta.env.SSR: {boolean} 应用是否运行在 server 上。
添加额外的环境变量，加载的环境变量也会通过 import.meta.env 以字符串形式暴露给客户端源码。
为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。例如下面这些环境变量
项目根目录新建:.env.development :
NODE_ENV=development
VITE_SOME_KEY=123
DB_PASSWORD=foobar
项目根目录新建:.env.production :
NODE_ENV=production
VITE_SOME_KEY=123
DB_PASSWORD=foobar
组件中使用：
console.log(import.meta.env.VITE_SOME_KEY) //123
console.log(import.meta.env.DB_PASSWORD) // undefined
配置 package.json：打包区分开发环境和生产环境
"build:dev": "vite build --mode development",
"build:pro": "vite build --mode production",
vite常用配置
export default defineConfig({
base: './', //打包路径
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
//服务器配置
server: {
host: '0.0.0.0',
port: 8145,
open: true,
https: false,
proxy: {}
},
})
