vue 3.2 电商前台项目（一）—— 搭建项目、编程规范、报错整理

嘟嘟大姐

已于 2022-04-02 17:24:55 修改

阅读量3k

点赞数 2

分类专栏： Vue3 文章标签： vue.js npm typescript

于 2022-03-14 13:02:31 首次发布

本文链接：https://blog.csdn.net/ailsa_csdn/article/details/123404914

版权

本文详细介绍了使用Vue 3.2搭建电商项目的过程，包括node和npm的安装，通过vue-cli创建项目，项目目录分析，安装开发者工具，版本管理和git提交规范。还探讨了代码格式规范，如ESLint和Prettier的配合使用，以及如何解决Vue 3.2的script setup未设置name和变量未使用等报错问题。

摘要由CSDN通过智能技术生成

一、项目搭建和准备工作

1. node和npm安装

node和npm 官网下载安装即可
为了快速使用npm可以使用淘宝镜像

打开cmd，输入以下代码安装淘宝镜像版npm

npm install -g cnpm --registry=https://registry.npm.taobao.org
在之后的使用中，npm均用“cnpm”替代

检测是否安装成功和检测版本信息
打开cmd，输入

node -v
npm -v

npm的升级

npm install npm@latest -g

node版本升级

window系统：官网下载最新版本覆盖

2. 通过vue-cli创建项目

安装vue-cli

npm install vue@next

打开控制台，输入 vue create 项目名 ，创建项目
选择配置，然后回车
vue版本选择3
是否使用class风格的组件语法？（如果没有选择typescript就跳过该步骤）
根据自己需要选择即可，我选的是 y
使用Babel与TypeScript一起用于自动检测的填充? 这里一定要选择y （如果没有选择typescript就跳过该步骤）
路由是否使用history模式？如果项目中存在要求就使用history(即:y)，但是一般还是推荐大家使用hash模式，毕竟history模式需要依赖运维
选择一种CSS预处理类型，这个需要根据各个项目的要求使用那种css编译处理
eslint 风格，建议选择标准模式即可
选择校验时机，一般都会选择保存时校验，好及时做出调整
配置文件的存放位置，一般存放在单独的文件中
是否保存当前选择的配置项
如果当前配置是经常用到的配置，建议选择y存储一下当前配置项。如果只是临时使用的话就不需要存储了
等待安装完成
安装完成

在这里插入图片描述

3. vue项目的目录分析

在这里插入图片描述

public文件夹：一般放置静态资源（如：图片），webpack打包时会原封不动的打包到dist文件夹

router / index.js

import {
    createRouter, createWebHashHistory } from 'vue-router'
// 配置路由规则
const routes = [
  
]
// 创建路由实例
const router = createRouter({
   
  // 使用hash路由模式
  history: createWebHashHistory(),
  routes
})

export default router

main.js

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

4. 安装开发者工具

4.1 在线安装

打开谷歌网上应用商店，搜索vue选择对应的版本

4.2 离线安装

下载工具
vue3开发者工具下载
打开谷歌扩展程序，将下载的 .crx 工具拖入扩展程序

5. 版本管理

5.1 安装git

本地安装 git
版本查看 git -version
配置码云SSH公钥
添加公钥

5.2 关联码云

在码云上创建项目并克隆SSH地址
打开项目文件夹，右键 git bash打开git，然后输入git remote add origin 克隆的ssh地址

5.3 提交项目到码云

// 第一步：添加当前目录下的所有文件到暂存区
git add .
// 第二步：将暂存区内容添加到仓库中
git commit -m '描述'
// 第三步：上传远程代码并合并
git push
// 首次可能需要强制提交，之后直接使用 git push 即可
git push -u origin master -f

5.4 码云创建分支

创建子组件时可在码云上创建一个分支，这样利于维护，最后需要合并分支

/*把线上分支拉入本地，在本地写好后再提交并与主分支融合*/
git pull
/*进入分支*/
git checkout 分支名


/*分支完成后先提交再与主分支融合（合并）*/


/*切换到主分支master上*/
git checkout master
/*分支与主分支融合*/
git merge  origin/分支名
/*再次提交*/
git push

6. 样式设计

在css中使用 @指代src时，要使用 ~@

6.1 样式重置与公用

重置样式

执行 cnpm i normalize.css 安装重置样式的包，然后在 main.js 导入 normalize.css 即可

// main.js


// 重置样式
import 'normalize.css'

公用样式
新建文件 src/assets/styles/common.css在该文件写入常用的样式，然后在 main.js 导入即可。

/*  重置样式 */
* {
   
  box-sizing: border-box;
}

html {
   
  height: 100%;
  font-size: 12px;
}
body {
   
  height: 100%;
  color: #333;
  min-width: 1240px;
  font: 1em/1.3 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI'