Vue运行自己写的页面步骤详解首先如果没有安装请先从Node.js下载安装

Vue运行自己写的页面步骤详解

一、安装Vue CLI工具

确保你的电脑上安装了Node.js和npm。如果没有安装，请先从Node.js官网下载安装。

然后，打开终端或命令行工具，输入以下命令来全局安装Vue CLI：

npm install -g @vue/cli 

二、创建Vue项目

在终端中输入以下命令来创建项目：

vue create my-project 

项目创建完成后，进入项目目录：

cd my-project 

三、编写页面组件

在目录下创建一个新的Vue组件文件，例如 Home.vue。

编写组件内容，以下是一个简单的示例：

<template> <div> <h1>Welcome to Vue!</h1> </div> </template> <script> export default { name: 'Home' } </script> <style> h1 { color: #42b983; } </style> 

四、配置路由

如果项目中没有安装vue-router，需要先安装它：

npm install vue-router 

配置路由：在 src/router/index.js 中添加新的路由配置：

import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'home', component: Home } ] }) 

在主入口文件中引入路由：在 src/main.js 中引入路由：

import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false new Vue({ el: '#app', router, components: { App }, template: '' }) 

五、启动项目

启动开发服务器：在项目根目录下运行以下命令：

npm run serve 

这将启动一个本地开发服务器，默认地址为 。

访问自己编写的页面：在浏览器中输入 即可访问自己编写的页面。