用Vite从零开始搭建项目

电商前台系统(To C)

实现页面:

- 首页

- 分类

- 详情

- 购物车

- 登录/注册

- ......

技术栈: vite + vue.js + vue-router + vuex + axios + vant + ES6 + ...

从零开始搭建项目

1. 利用 vite 构建工具搭建最基本的项目结构

$ npm create vite mobile-demo -- --template vue

进入项目目录，安装依赖:

$ cd mobile-demo // 进入自己所创建的项目内

$ npm install

$ npm run dev // 运行自带的项目，能运行则说明没有问题

2. 项目目录结构规划

> |-- public 公共静态资源目录，该目录下资源不会被构建工具处理

> |-- src 项目源代码目录

  >     |-- assets 静态媒体资源目录，该目录下的资源会被构建工具进行处理后使用

  >     |-- components 公共组件，即可能在多个其它组件中都会被复用到的公共组件

  >     |-- router 放置与路由相关的资源文件

  >     |-- store 放置与全局状态管理相关的资源文件

  >     |-- views 应用中的页面级组件(pages)

  >     |-- api 通常放置的是应用中发送网络请求相关的资源(requests)

  >     |-- utils 通常放置辅助资源

  >     |-- App.vue 应用中的根组件

  >     |-- main.js 应用的 JS 入口文件

> |-- index.html SPA 的入口HTML

> |-- package.json 整个应用的配置文件

> |-- vite.config.js 构建工具vite的配置文件

进行样式重置处理

在搭建好项目基本结构后，通常会先考虑样式重置，即各浏览器中会先有一些默认样式，但实际开发过程中，这些默认样式可能会影响到结构与样式渲染，所以可以先将浏览器默认样式进行重置处理。

常用方案有 reset.css 与 normalize.css 两种，但 normalize.css 相对而言更温合一些，更符合 h5 的特性，所以常用 normalize.css 进行重置处理。

$ npm i normalize.css

安装包资源后，在项目入口的 `src/main.js` 文件中引入即可:

import 'normalize.css'

import App from './App'

但有些 UI 组件库中也会进行应用中的样式重置处理。

3. 引入路由

安装:

$ npm i vue-router

在 `src/router/index.js` 中创建路由对象:

import { createRouter, createWebHistory } from 'vue-router'

import routes from './routes'

/创建路由对象实例：

const router = createRouter({

  history: createWebHistory(), // 路由模式: createWebHistory()是h5路由模式, createWebHashHistory()是hash路由模式

  routes, // 静态路由表的配置

})

导出：

export default router

在 `src/main.js` 中使用路由:

import { createApp } from 'vue'

import App from './App.vue'

// 引入路由对象

import router from './router'



createApp(App)

  .use(router) // 使用路由

  .mount('#app')

4. 引入状态管理库 vuex

安装:

$ npm i vuex

在 `src/store/index.js` 创建 Store:

import { createStore } from 'vuex'



// 创建仓库对象

const store = createStore({})



// 导出

export default store

在 `src/main.js` 文件中使用 Store 仓库:

import { createApp } from 'vue'

import App from './App.vue'

// 引入路由与状态仓库

import router from './router'

import store from './store'



createApp(App)

  .use(router) // 使用路由

  .use(store) // 使用状态仓库

  .mount('#app')

5. 引入 UI 组件库

这里使用Vant组件库实现项目 UI 结构快速开发

安装:

$ npm i vant

引入组件库的组件使用:

通常有两种方案:

全部引入: 使用会更方便，但打包构建后，包的体积是最大的

按需引入: 相对使用麻烦一些，但打包构建后，只会将使用到的组件打包，包的体积能够做到最优。通常现在的按需引入都使用自动按需引入方案，即安装相关插件并进行配置处理。

全部引入: 将 vant 所有组件一次性全量引入注册，并引入所有样式，在 `src/main.js` 文件中:

// 引入 vant UI组件库

import Vant from 'vant'

// 引入 vant 样式文件

import 'vant/lib/index.css'



// ......

app.use(Vant) // 使用 vant UI 组件库中所有组件

// ......

在自定义组件中使用到 vant 组件:

<van-button type="primary">主要按钮</van-button>

6. 引入 axios 并进行二次封装

安装:

$ npm i axios

二次封装:

/**

 * 该文件中主要完成对 axios 进行二次封装

 */

import axios from 'axios'



// 引入 vant 的轻提示组件以备用

import { showLoadingToast, closeToast } from 'vant'



// 判断当前是开发环境还是生产环境，根据环境的不同，配置各自的 baseURL

// import.meta.env.MODE 环境变量中的模式: development表示开发模式, production表示生产模式

// const baseURL = import.meta.env.MODE === 'development' ? '开发环境使用到的baseURL' : '生产环境使用到的baseURL'



// 创建实例

const service = axios.create({

  baseURL: 'http://162.14.108.31:3000', // 基准URL路径

  timeout: 10000, // 超时时间

})



// 请求拦截

service.interceptors.request.use(config => {

  // 提示数据加载中...

  showLoadingToast({

    message: '加载中...',

    // forbidClick: true,

    loadingType: 'spinner',

    duration: 0,

  })



  // TODO: 统一在请求头中添加 token 认证字段的传递



  // 需要return配置对象config才能继续发起网络请求

  return config

}, error => {

  console.error('请求拦截失败:', error)

  // 关闭轻提示效果

  closeToast(true)

})



// 响应拦截

service.interceptors.response.use(response => {

  // 响应返回，则关闭轻提示效果

  closeToast(true)



  // 根据响应对象中的 http 状态码进行判断

  if (response.status >= 200 && response.status < 300) {

    // 请求成功，获取后端响应返回的数据

    const responseData = response.data

    // 对响应的数据统一进行规范格式处理

    // 后端统一返回数据的格式规范为: {code, message, data}

    // code 为 200 时表示成功，则从 data 中可获取成功的业务数据

    const { code, message, data } = responseData

    if (code === 200) {

      return data

    }

    // 当返回的 code 不为 200 时，返回一个 rejected 状态的 Promise 对象

    return Promise.reject(new Error(message))

  }

}, error => {

  console.error('响应拦截失败,', error)

  // 关闭轻提示效果

  closeToast(true)

})



export default service

7. 搭建应用的整体布局框架

分析发现整个应用主要是上-中-下的布局结构，所以在 App 组件中利用命名视图，同级同时渲染顶部导航、中间页面主体、底部标签栏即可。