01 创建项目

喵喵酱仔__

已于 2023-03-18 13:23:47 修改

阅读量740

点赞数

分类专栏： # 大事件文章标签： javascript vue.js 前端 Powered by 金山文档

于 2023-03-17 22:53:57 首次发布

本文链接：https://blog.csdn.net/qq_38210427/article/details/129629785

版权

大事件专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1 创建项目

确认自己vue命令版本

查看vue命令版本(注意: 是大V)

vue -V

如果不是5.x版本, 可以执行命令更新

npm i @vue/cli -g

选择第3个自定义预设

初始化 vue-cli 的核心步骤：

Manually select features(点击空格进行选择)

(*) Babel

( ) TypeScript

( ) Progressive Web App (PWA) Support

(*) Router

(*) Vuex

(*) CSS Pre-processors

(*) Linter / Formatter

( ) Unit Testing

( ) E2E Testing

Choose a version of Vue.js that you want to start the project with (Use arrow keys)

Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)

Sass/SCSS (with dart-sass)

Sass/SCSS (with node-sass)

Less

Stylus

Pick a linter / formatter config: (Use arrow keys)

ESLint + Airbnb config

ESLint + Standard config

ESLint + Prettier

Pick additional lint features: (Press to select, to toggle all, to invert selection)

(*) Lint on save

( ) Lint and fix on commit

Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)

In dedicated config files

In package.json

Save this as a preset for future projects? (y/N)

梳理项目结构

为项目开发做准备，把不需要的代码、文件删除掉

重置 src/App.vue组件中的代码

<template>
  <div>App 根组件</div>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style lang="less" scoped></style>

重置 src/router/index.js 路由模块中的代码

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = []
const router = new VueRouter({
  routes
})
export default router

清空 src/components 目录和 src/views目录。

把图片素材目录下的 images 文件夹（项目中需要用到的图片），复制粘贴到 src/assets 目录下。

并把global.less, 引入到main.js

import '@/assets/global.less' // 全局初始化样式

2 ESLint

ESLint是什么

ESLint 是一个代码检查工具，用来检查你的代码是否符合指定的规范

例如: = 的前后必须有一个空格

例如: 函数名后面必须有空格

例如: await必须用用在async修饰的函数内

例如: ==必须转换成3个等

........

ESLint的好处

在写代码过程中, 检查你代码是否错误, 给你小黑屋提示

ESLint可以约束团队内代码的风格统一

ESLint是法官, Standard是法律

ESLint的规范

规范文档: http://www.verydoc.net/eslint/00003312.html

规范文档2: https://standardjs.com/rules-zhcn.html

规范文档3: http://eslint.cn/docs/rules/

ESLint使用

在代码里随便多写几个回车, ESLint会跳出来刀子嘴豆腐心, 的提示你.

在webpack开发服务器终端 / 浏览器 => 小黑屋

eslint 是来帮助你的。心态要好，有错，就改。

把第4步规则名字, 复制到上面规范里查找违反了什么规则 / 根据第三步提示修改

小结

什么是ESLint?

代码检查工具

为什么要使用ESLint?

规范我们写代码的格式, 看着整洁 / 团队内成员风格统一

ESLint在哪里生效?

webpack开发服务器(终端和网页)+vscode(前提安装了eslint插件)

2.2 项目-ESLint使用

目标

了解ESLint工作过程

了解VSCode配合ESLint插件, 自动修复部分代码问题

讲解

ESLint工作过程

我们vue初始化项目的时候, 选择需要eslint功能, 以及standard检查规则

确保==vscode根目录==有eslintrc配置文件, vscode工作区(目录环境), 会根据配置来检查你的代码

当前项目下, 编写的代码, 违反eslint规则, 会在终端报错

ESLint工作环境

webpack+eslint检查代码, 在终端输出检查报错结果

Vscode+ESLint插件, 在编写代码区域报错结果+自动修复

ESLint插件

使用ESLint插件, 填入配置, 它会根据你当前项目的eslint配置来帮助你自动修复一些语法代码问题

在VSCode中, 下载这个插件

==2. 非常非常非常重要==

一定要把脚手架工程, 作为vscode根目录, 因为vscode+eslint插件要使用配置文件.eslintrc, 按照这个的规则检查你的代码

一定要配置插件监测的时机, 修改ESLint插件配置

不用管别的(你的插件和我图片所示不一样, 你的可能多/少), 把红框的放在{}内即可

"eslint.run": "onType",
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

更多的规则可以参考这里: https://www.cnblogs.com/jiaoshou/p/12218642.html

检查是否生效

随便在src下的任意文件里多敲击几个回车, vscode报错提示, 证明ESLint插件开始工作

ctrl + s 报错下是否能自动修复部分问题, 可以, 证明ESLint插件开始工作

如果不工作, 请按照此文件检查: https://kdocs.cn/l/crar3sGM9wFs

点ctrl + s ,他会修复一部分问题

自定义规则

在.eslintrc.js文件中, 可以调整规则(团队内可以自定义自己一套)

rules是一个对象，以键值对的格式来约定规则：

键名是规则名

值是这条规则的具体说明。最常见的有off,warn,error

小结

VSCode+ESLint插件有何作用?

3组件库配置

目标

项目配置element-ui全部注册, 提高页面开发效率

讲解

参照 element-ui 的官方文档，进行安装、配置、使用：https://element.eleme.io/#/zh-CN/component/installation

下载element-ui包到当前项目(注意它支持的是Vue2版本项目)

yarn add element-ui

测四：

为何elementUI注册单独封装个模块文件?

答案：分散管理, 方便查找

封装新建src/elementUI/index.js, 在这里进行组件引入和注册

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

2 在main.js中引入, 使其参与到webpack打包并在网页生效

import '@/elementUI' // 注册elementUI组件

报错：

yarn 安装但是却提示"command not found"

问题重现：运行项目起服务yarn serve时，报错“yarn”不是内部命令，于是去命令行查看yarn版本，结果“bash: yarn: command not found”。于是网上百度。

解决方案：

首先安装yarn。输入命令：npm install -g yarn(安装全局yarn)

拓展：卸载yarn命令：npm uninstall -g yarn

安装yarn后，仍然找不到yarn——“bash: yarn: command not found”

报错2：

一、记一次 yarn 错误排查解决。在 Windows 系统中使用 Windows PowerShell 执行 yarn 命令，报错为：`

1.yarn : 无法加载文件 C:\Users[UserName]\AppData\Roaming\npm\yarn.ps1，因为在此系统上禁止运行脚本。

二、导致此错误的原因是，PowerShell 执行策略，默认设置为Restricted不加载配置文件或运行脚本。需变更设置为RemoteSigned，变更过程为：

1运行 Windows PowerShell（管理员）

https://zhidao.baidu.com/question/634080497414068644.html?qbl=relate_question_0&word=powershell%D4%DA%C4%C4

1.运行 Windows PowerShell（管理员），执行命令set-ExecutionPolicy RemoteSigned更改 PowerShell 执行策略，过程中提示询问是否要更改执行策略?，选择 A 或 Y 。如下图：

2.设置完毕，检验执行yarn config get registry命令，可正常加载执行脚本。

3.使用get-ExecutionPolicy命令，可查看当前 PowerShell 执行策略类型。

4项目-封装请求库

目标

封装项目请求架构, 为后面请求数据做准备

讲解

核心思想: 分层架构

在任意组件, 调用封装的接口方法, 接口方法调用统一的axios函数告诉他请求的参数, 它去请求数据

我(任意组件) -> 秘书(接口函数) -> 车(axios) -> 数据(后台返回)

安装 axios

yarn add axios

新建src/utils/request.js

项目核心请求方法的模块文件

import axios from 'axios'
// 创建一个自定的axios方法(比原axios多了个基地址)
// axios函数请求的url地址前面会被拼接基地址, 然后axios请求baseURL+url后台完整地址
const myAxios = axios.create({
  baseURL: 'http://big-event-vue-api-t.itheima.net'
})
// 导出自定义的axios方法, 供外面调用传参发请求
export default myAxios

新建src/api/index.js项目接口方法统一管理模块文件

import request from '@/utils/request'
export const getListAPI = () => {
  // 这里先用这个接口测试下, 如果url以http开头会忽略baseURL, axios直接请求此地址
  return request({
    url: 'http://geek.itheima.net/v1_0/channels'
  })
}

在任意组件src/App.vue中, 引入接口请求方法, 并请求数据

import { getListAPI } from '@/api'
export default {
  created () {
    this.getListFn()
  },
  methods: {
    async getListFn () {
      const res = await getListAPI()
      console.log(res)
    }
  }
}

启动项目看是否调用接口成功

这种分层架构思想, 可以更好的统一管理项目中所有接口, 并也方便统一给axios方法添加拦截器和修改基地址