小兔鲜儿电商前台项目（一） —— 项目初始化

原创

已于 2022-04-07 13:44:56 修改 · 4.2k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #es6

于 2022-04-07 11:12:51 首次发布

本文详细介绍了使用vue-cli创建电商前端项目的过程，包括项目初始化、目录结构调整、项目配置如src文件夹简写和eslint忽略设置。此外，文章还探讨了编程规范，如代码格式规范（ESlint & Prettier配合）、git提交规范（Commitizen、husky、commitlint等）。文章进一步讨论了vuex的扩展，如getters、modules和状态持久化，以及axios请求工具函数、路由设计、scss自动化导入、样式重置和其他插件（如nprogress）的使用。

一、创建项目

1. vue-cli 创建项目

打开控制台，输入 vue create 项目名 ，创建项目
选择配置，然后回车
vue版本选择3
路由是否使用history模式？选择 n
如果项目中存在要求就使用history(即:y)，但是一般还是推荐大家使用hash模式，毕竟history模式需要依赖运维
选择一种CSS预处理类型，这个需要根据各个项目的要求使用那种css编译处理
eslint 风格，建议选择标准模式即可
选择校验时机
建议保存和修改时都进行检测
配置文件的存放位置，一般存放在单独的文件中
是否保存当前选择的配置项
如果当前配置是经常用到的配置，建议选择y存储一下当前配置项。如果只是临时使用的话就不需要存储了
等待安装完成
安装完成

2. 项目目录调整

2.1 初始项目目录

在这里插入图片描述

2.2 调整后的项目目录

在这里插入图片描述

2.3 vue3 中改变的文件

router / index.js

import {
     
      createRouter, createWebHashHistory } from 'vue-router'
// 路由规则
const routes = [
]

// 创建路由实例
const router = createRouter({
     
     
  // 使用hash路由模式
  history: createWebHashHistory(),
  routes
})

export default router

store / index.js

import {
     
      createStore } from 'vuex'

// 创建仓库
export default createStore({
     
     
  state: {
     
     
  },
  getters: {
     
     
  },
  mutations: {
     
     
  },
  actions: {
     
     
  },
  modules: {
     
     
  }
})

. main.js

// 不再引入Vue构造函数，引入的是名为createApp的工厂函数，无需通过new调用
import {
     
      createApp } from 'vue'
// 引入根组件
import App from './App.vue'
// 引入路由实例
import router from './router'
// 引入仓库（vuex）实例
import store from './store'
// createApp(App)：创建应用实例对象——app（类似于vue2中的vm，但app比vm更“轻”，即app没有vm那么多的方法属性等）
const app = createApp(App)
// 挂载
app.mount('#app')

3. 项目配置

3.1 src文件夹简写，别名@的配置

这个是针对项目进行配置的，如果vscode已经全局配置了，可以不进行配置
新建 src / jsconfig.json

{
   
   
  "compilerOptions": {
   
   
      "baseUrl": "./",
          "paths": {
   
   
          "@/*": [
              "src/*"
          ]
      }
  },
  "exclude": [
      "node_modules",
      "dist"
  ]
}

注意：配置后需要重启编辑器

3.2 忽略eslint校验

新建 src / .eslintignore

/dist
/src/vender

eslint在做风格检查的时候忽略 dist 和 vender 不去检查

二、编程规范

1. 代码格式规范

通过 ESLint + Prettier + VSCode 配置 配合进行了处理。最终达到在保存代码时，自动规范化代码格式的目的

1.1 ESlint 和 Prettier 配合解决代码格式问题

VSCode中安装prettier插件
新建prettier配置文件： .prettierrc
注意：复制过去时，不能加注释！！！！

{
   
   
    // 不尾随分号
    "semi": false,
    // 使用单引号
    "singleQuote": true,
    // 多行逗号分割的语法中，最后一行不加逗号
    "trailingComma": "none"
  }

修改VSCode配置
打开VSCode设置面板，不用选择或者搜索，找到如下代码，将4修改为2
解决多个代码格式化工具之间的冲突

在vscode中右键选择 “使用…格式化文档”，选择“prettier”

解决 ESLint 和 Prettier之间冲突问题

打开 .eslintrc.js 在 rules 下新增 'space-before-function-paren': 'off'

2. git 提交规范

2.1 工具 —— Commitizen

约定式提交

当使用 commitizen 进行代码提交（git commit）时，commitizen 会提交你在提交时填写所有必需的提交字段！

全局安装commitizen

cnpm install -g commitizen

安装并配置 cz-customizable 插件

通过 cz-customizable 自定义提交规范

使用 npm 下载 cz-customizable

cnpm i --save-dev  cz-customizable

添加以下配置到 package.json 中

"config": {
   
   
    "commitizen": {
   
   
      "path": "node_modules/cz-customizable"
    }
  }

项目根目录下创建.cz-config.js 自定义提示文件

module.exports = {
   
   
  // 可选类型
  types: [
    {
   
    value: 'feat', name: 'feat:     新功能' },
    {
   
    value: 'fix', name: 'fix:      修复' },
    {
   
    value: 'docs', name: 'docs:     文档变更' },
    {
   
    value: 'style', name: 'style:    代码格式(不影响代码运行的变动)' },
    {
   
   
      value: 'refactor',
      name: 'refactor: 重构(既不是增加feature，也不是修复bug)'
    },
    {
   
    value: 'perf', name: 'perf:     性能优化' },
    {
   
    value: 'test', name: 'test:     增加测试' },
    {
   
    value: 'chore', name: 'chore:    构建过程或辅助工具的变动' },
    {
   
    value: 'revert', name: 'revert:   回退'