vue开发与常见问题汇总

版本	日期	作者	说明
v0.0.1	2023-01-28	Boa	初始化档

目录

[TOC]

---

1.前言

1.1.编写目的

2.环境准备

【i】参考：

1. node与npm版本对应关系： nodejs.org/zh-cn/downl…

# 安装node
port install node18
# 安装npm
port install npm8

# 安装n模块，对node多版本进行管理。
npm i -g n

# 安装指定node版本
n v8.9.1

# 查看当前已安装版本
n ls
# 查看所有可能版本
n ls-remote --all

# 删除指定版本
n rm xxx

# 切换版本
sudo n xxx

# 查看 vue/cli版本
vue -V

3.初始化

参考：

1. vue官方文档-快速上手: cn.vuejs.org/guide/quick…

# Vue 官方的项目脚手架工具，按提示操作即可。
npm init vue@latest

# 安装依赖
npm install
# 【i】推荐使用yarn安装依赖
yarn install

# 修复配置错误
npm run lint

# 开发运行
npm run dev
# 生产打包
npm run build

4.配置

4.1.配置eslint缩进

【i】参考：

1. eslint.org/docs/latest…

==【!】注意： 记得修改vscod的缩进与此一致，并一定要重启，否则一直提示报错。==

修改 eslintrc.cjs

// 4个空格
rules: {
    indent: ["error", 4],
},

// 或者采用tab缩进
rules: {
    "indent": ["error", "tab"]
}

5.常见问题

5.1.自定义组件名

【i】报错： Component name "index" should always be multi-word.

==按规范，除 App.vue 外，组件须使用多个单词，并且采用驼峰式写法，或者用 - 连接。== 如：

user-index.vue

userIndex.vue

5.2.即使路径正确，.ts文件仍报找不到vue组件

增加 tsconfig.json 文件

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

5.3.找不到 vue-router

yarn add vue-router

# 或者
npm install vue-router

6.样式

• flex布局下子容器width:100% 无效

<view id="father">
    <view class="son">son 1</view>
    <view class="son">son 2</view>
    <view class="son">son 3</view>
</view>

<style lang="scss">
#farther {
    display: flex;
    /*【i】必须加此句，才能换行。*/
    /* 否则会出现横向滚动条 */
    flow-wrap: wrap;
}

.son {
    /* 此句为让子容器撑开*/
    flex-shrink: 0;
    margin: 20px auto;
    border: 1px solid #ccc;
    width: 100%;
    background: #eee;
    text-align: center;
}
</style>

7.路由配置与动态路由

7.1.启用路由

第1步： 新建路由规则

import { creatRouter, createWebHistory } form 'vue-router'
import notFoundVue form "@/pages/error/404.vue";
import indexVue from "@/pages/index/index-index.vue";
import loginVue form "@/pages/user/user-login.vue";


const routes = [
    {
        path: `/:catchAll(.*)`,
        name: "notFound",
        component: notFoundVue,
        alias: ['/404', '/error']
    },
    {
        path: "/",
        name: "home",
        component: indexVue,
        alias: ['/index', '/home', 'index/index']
    },
    {
        path: "/login",
        name: "login",
        component: loginVue,
        alias: ['/user/login']
    }
];

const router = createRouter({
    history: createWebHistory(),
    routes
});


export default router;

第2步： 修改main.js，启用路由：

import { createApp } from 'vue'
import router from './router';
import App form './App.vue';

createApp(App).use(router).mount('#app');

第3步：修改App.vue，增加以下内容：

<template>
    <!-- 与path对应路由的组件内容显示在此 -->
    <router-view/>
</template>

第4步：路由跳转

• 方式一： router-link

<router-link to="/">Index</router-link>
<router-link to="/login">Login</router-link>

• 方式二： $router.push() 或 router.push()

<button @click="toLogin">Login</button>

<script lang="ts" setup>
import { useRouter } from 'vue';


const router = useRouter();
const toLogin = () => {
    router.push('/login');
}
</script>

第5步：路由测试

npm run dev:h5

打开浏览器即可进行跳转测试。

7.2.动态路由

1.按模块组织路由规则

目录结构：

/-
 | ...
 |--router
 |--index.ts
 |--modules
 |  |--common.ts
 |  |--user.ts
 ...

模块路由样例：

export default [
    {
        path: "...",
        name: "...",
        component: "xxx",
        // 或者写成：
        component: () => import('xxxx')
        alias: ['...']
    }
];

2.自动批量注入

修改 router/index.ts：

const routes = [
    // ...
];

// 导入所有模块路由定义，解析。
//【!】注意：`import.meta.glob` 会报错，暂无解决方法，代码可运行，建议忽略。
const moduleFiles = import.meta.glob(
    // 绝对路径以项目根开始, `/src/router/modules/*.ts`
    './modules/*.ts', 
    { eager: true, import: 'default'}
);
Object.keys(moduleFiles).forEach((key) => {
    const mod = moduleFiles[key] || {};
    const modList = Array.isArray(mod) ? [...mod] : [mod];
    routes.push(...modList);
});

const router = createRouter({
    history: createWebHistory(),
    routes
});

动态注入所有模块路由

8.参考