YDOOK：vue-clie4.5: vue3.0:生成项目后修改默认主页的内容自定义Vue 默认主页

版权归作者 YDOOK JY Lin所有，未经同意，不可转载。同意转载后必须标明署名与出处。

本文链接：https://blog.csdn.net/weixin_42255190/article/details/111355103

YDOOK：vue-clie4.5: vue3.0:生成项目后修改默认主页的内容自定义Vue 默认主页

首先在 package.json 文件第一层内部补充写入：

"vue": {
        "devServer": {
            "port": 80,
            "open": true
        }
    },

补充后的 package.json 文件的内容是：

{
    "vue": {
        "devServer": {
            "port": 80,
            "open": true
        }
    },
    "name": "mp2",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    },
    "dependencies": {
        "core-js": "^3.6.5",
        "vue": "^3.0.0",
        "vue-router": "^4.0.0-0",
        "vuex": "^4.0.0-0"
    },
    "devDependencies": {
        "@typescript-eslint/eslint-plugin": "^2.33.0",
        "@typescript-eslint/parser": "^2.33.0",
        "@vue/cli-plugin-babel": "~4.5.0",
        "@vue/cli-plugin-eslint": "~4.5.0",
        "@vue/cli-plugin-router": "~4.5.0",
        "@vue/cli-plugin-typescript": "~4.5.0",
        "@vue/cli-plugin-vuex": "~4.5.0",
        "@vue/cli-service": "~4.5.0",
        "@vue/compiler-sfc": "^3.0.0",
        "@vue/eslint-config-prettier": "^6.0.0",
        "@vue/eslint-config-typescript": "^5.0.2",
        "eslint": "^6.7.2",
        "eslint-plugin-prettier": "^3.1.3",
        "eslint-plugin-vue": "^7.0.0-0",
        "prettier": "^1.19.1",
        "typescript": "~3.9.3"
    }
}

这样做的目的是是为了方便测试时， Chrome 浏览器自动打开。

cd [项目所在文件夹名]

npm run server

回车：

在这里插入图片描述

自动弹出的原始默认界面：Vue-cli 欢迎首页：

在这里插入图片描述

接着，我们需要打开项目目录中的下面文件：Home.vue

该文件就是 vue-cli 项目的默认首页：

在这里插入图片描述

主题的代码为：

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import HelloWorld from "../components/HelloWorld.vue"; // @ is an alias to /src

export default defineComponent({
  name: "Home",
  components: {
    HelloWorld
  }
});
</script>

如果上面中的一行代码默认不和格式报错：

import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src

将其改为下面即可：

import HelloWorld from "../components/HelloWorld.vue"; // @ is an alias to /src

然后，将 Home.vue 改为：

<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png" /> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" /> -->
    <!-- 这里写你的页面内容，上面两行代码可以删除也可以保留。 -->
    <h1>YDOOK.COM YDOOK.CN JYLin</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
// import HelloWorld from "../components/HelloWorld.vue"; // @ is an alias to /src

export default defineComponent({
  name: "Home",
  components: {
    // HelloWorld
  }
});
</script>

此时，再次编译运行 npm:

在这里插入图片描述

chrome 浏览器中将出现：

在这里插入图片描述

此时对应得 App.vue:

在这里插入图片描述

代码内容为：

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
    <router-view />
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>