用vue3，从0到1搭建一个移动端的项目（一）

一、项目初始化

1. 创建项目

使用Vue CLI创建项目：

javascript 复制代码

# 安装或更新Vue CLI
npm install -g @vue/cli

# 创建项目
vue create vue3-mobile-template

选择Vue3，并根据需要选择以下功能：

Babel
TypeScript
Router
Vuex (或Pinia)
CSS Pre-processors (SCSS)
Linter / Formatter (ESLint + Prettier)

2. 安装核心依赖

javascript 复制代码

# 进入项目目录
cd vue3-mobile-template

# 安装Vant 4.x (适用于Vue3)
npm i vant

# 安装移动端适配方案
npm i amfe-flexible postcss-pxtorem

# 安装axios请求库
npm i axios

# 安装Pinia状态管理(如未在初始化时选择Vuex)
npm i pinia

# 安装工具库
npm i dayjs

二、项目配置

1. 移动端适配配置

创建postcss.config.js文件：

javascript 复制代码

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5, // Vant官方推荐375px设计稿使用37.5
      propList: ['*'],
      selectorBlackList: ['.norem'], // 不转换的类名
      exclude: /node_modules\/(?!(vant))/
    },
  },
};

在main.js中引入flexible：

javascript 复制代码

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
import 'amfe-flexible'

// 导入全局样式
import './assets/styles/index.scss'

const app = createApp(App)
app.use(router)
app.use(createPinia())
app.mount('#app')

2. Vant UI组件按需引入

使用unplugin-vue-components实现自动按需引入：

javascript 复制代码

npm i unplugin-vue-components -D

配置vue.config.js：

js 复制代码

const { defineConfig } = require('@vue/cli-service')
const { VantResolver } = require('unplugin-vue-components/resolvers')
const ComponentsPlugin = require('unplugin-vue-components/webpack')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      ComponentsPlugin({
        resolvers: [VantResolver()],
      }),
    ],
  },
  // 开发服务器配置
  devServer: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://your-api-domain.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
})

三、项目结构搭建

python 复制代码

src/
├── api/                # API请求模块
│   ├── index.js        # API接口统一出口
│   ├── user.js         # 用户相关接口
│   └── common.js       # 公共接口
├── assets/             # 静态资源
│   ├── images/         # 图片资源
│   ├── icons/          # 图标资源
│   └── styles/         # 样式文件
│       ├── index.scss  # 全局样式入口
│       ├── reset.scss  # 重置样式
│       └── variables.scss # 样式变量
├── components/         # 公共组件
│   ├── common/         # 通用组件
│   └── business/       # 业务组件
├── router/             # 路由配置
│   ├── index.js        # 路由入口
│   └── routes.js       # 路由表
├── stores/             # Pinia状态管理
│   ├── index.js        # 状态管理入口
│   └── modules/        # 状态模块
│       ├── user.js     # 用户状态
│       └── app.js      # 应用状态
├── utils/              # 工具函数
│   ├── index.js        # 工具函数入口
│   ├── request.js      # Axios请求封装
│   ├── storage.js      # 本地存储封装
│   ├── validate.js     # 表单验证
│   └── format.js       # 格式化工具
├── views/              # 页面组件
│   ├── home/           # 首页
│   ├── user/           # 用户页面
│   └── error/          # 错误页面
├── App.vue             # 根组件
├── main.js             # 入口文件
└── permission.js       # 权限控制