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

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

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