搭建vue3项目（只有静态页面版）

1.确保安装了 Node.js 和 npm

打开命令行工具，注意是命令提示符而不是终端，输入 node -v 和 npm -v 检查是否已安装 Node.js 和 npm

如果未安装，可以从 Node.js 官网 下载并安装。

2.全局安装 Vue CLI：

在命令行中运行以下命令来安装 Vue CLI：

npm install -g @vue/cli

3.创建新的 Vue 项目：

运行以下命令来创建一个新的 Vue 项目：

vue create my-vue-demo

按照提示选择预设或手动选择特性。没要求的话，可以选择默认预设。默认的是vue3，以下也是用的vue3。

4.进入项目目录：

使用以下命令进入新创建的项目目录：

cd my-vue-demo

5.启动开发服务器：

运行以下命令启动开发服务器：

npm run serve

输入或点击http://localhost:8080，你将会看到 Vue 的欢迎页面。然后就可以开始开发了。

6.安装Vue Router

在项目根目录下运行以下命令来安装 Vue Router：

npm install vue-router

7.配置Vue Router

7.1 创建路由配置文件

在 src 目录下创建一个 router 文件夹，并在其中创建一个 index.js 文件

方法一，用命令：

mkdir src/router
touch src/router/index.js

方法二，在项目里右键新建：

7.2 编写路由配置

编辑 src/router/index.js 文件，添加以下内容：

import { createRouter, createWebHashHistory } from 'vue-router'
import HomePage from "@/views/homePage.vue"

const routes = [
  {
    path: "/",
    name: 'HomePage',
    component: HomePage,
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes
})
export default router

7.3 修改主入口文件

编辑 src/main.js 文件，引入并使用路由配置：

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

const app = createApp(App)
app.use(router) // 使用路由器
app.mount('#app')

8.创建视图组件

确保你有 homePage.vue 组件。如果没有，可以在 src/views 目录下创建它们：

用命令：

mkdir src/views
touch src/views/homePage.vue

也可以右键新建。

编辑 src/views/Home.vue：

<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>

9.修改App.vue文件

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

10.启动项目

npm run serve

现在，你应该能够在浏览器中访问 http://localhost:8080 并看到 homePage页面。

打开命令提示符的小提示：

（1）可以按住 win+R 键，输入“cmd”打开，然后 cd + 路径 切换；

（2）也可以直接找到目标文件夹，在路径上方输入“cmd”回车可以直接打开。

原文地址：https://blog.csdn.net/Amy_cx/article/details/143631744

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！