vue项目学习笔记2

对vue项目学习笔记1的补充

推荐软件

  1. 代码片段工具
    这个软件是我常用的一个工具,因为不可避免的使用到vue2,以及vue3,还有html,代码片段工具是一个创建你的默认配置的工具,你可以把你常用的vue2或vue3代码片段保存起来,然后在需要的时候直接调用,省去了重复的配置,提高了效率.

    代码片段网址:https://snippet-generator.app/
    以下是我的vue2代码片段,如果你不喜欢用我的,可以去这个网址自己生成自己想要的

    {
        "vue2": {
            "prefix": "vue2",
            "body": [
                "<template>",
                "",
                "   <div></div>",
                "",
                "</template>",
                "",
                "<script>",
                "",
                "</script>",
                "<style lang=\"scss\" scoped>",
                "",
                "</style>"
            ],
            "description": "vue2"
        }
    }

    git提交报错

    5:37  error  'next' is defined but never used  no-unused-vars

    解决方法:

    在package.json文件中的rules下添加以下配置

     "rules": {
        "generator-star-spacing": "off",
        "no-tabs":"off",
        "no-unused-vars":"off",
        "no-console":"off",
        "no-irregular-whitespace":"off",
        "no-debugger": "off"
    },

优化导入方法

在根目录下创建vue.config.js文件, 并在其中添加以下配置
解决层级查找不必要的麻烦,更新文件的导入方法,全部更新到使用@作为导入符

let path = require("path");
 configureWebpack: (config) {
        config.resolve = {
            extensions: ['.js', '.vue', '.json'],
            alias: {
                '@': path.resolve(__dirname, 'src')
            }
        }
    }

修复 <名称必须使用-name的命名规则>

在项目根目录下创建.eslintrc.js文件, 并在其中添加以下配置

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/essential",
    "eslint:recommended",
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    // parser: '@babel/eslint-parser',
  },
  rules: {
    // 去掉函数()前面的空格
    "space-before-function-paren": "off",
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    // 关闭驼峰命名规则
    "vue/multi-word-component-names": 0,
  },
};

搭建底部栏

删除view下所有文件, 创建以下文件

创建好以下文件之后,可以利用上面介绍的代码片段工具,或直接导入我的vue2代码片段,快速创建组件
示例图片

Cart.vue
Categories.vue
User.vue
Home.vue

更改默认路由

我这里的路由已经改成了@代替src的形式,具体方法已经在上面介绍过了

const routes = [
  {
    path: "/home",
    name: "home",
    component: HomeView,
  },
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/categories",
    name: "Categories",
    component: () => import("@/views/Categories.vue"),
  },
  {
    path: "/cart",
    name: "Cart",
    component: () => import("@/views/Cart.vue"),
  },
  {
    path: "/user",
    name: "User",
    component: () => import("@/views/User.vue"),
  },
];

更改根目录下的根组件App.vue

<template>
  <div id="app">
    <!-- 视图层的展示 -->
    <router-view />
  </div>
</template>

<script></script>
<style lang="scss" scoped></style>

添加公共css文件, 并在main.js中引入

引入公共css

import "@/assets/css/common.css";

创建公共css文件common.css,路径为src/assets/css/common.css
* {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}