创建Vue项目_创建_你可以按默认走或者根据自己的需求来设置

一、创建Vue项目

在访问Vue页面之前，得先搭个架子。这就需要用到一个叫做Vue CLI的工具，它就像搭积木一样，能帮你快速建立一个Vue项目。

1. 安装Vue CLI

确保你的电脑上已经安装了Node.js和npm（这个是Node的包管理器）。你可以通过以下命令来安装Vue CLI：

npm install -g @vue/cli

2. 创建新的Vue项目

安装好Vue CLI后，你可以创建一个新的Vue项目。使用这个命令：

vue create my-vue-project

执行命令时，Vue CLI会问你要不要选预设，或者自己来定制。你可以按默认走，或者根据自己的需求来设置。

3. 进入项目目录

项目创建好了之后，记得进到这个项目的目录里：

cd my-vue-project

二、配置路由

项目有了，接下来得弄清楚怎么跳转到不同的页面。Vue Router就是Vue.js的官方路由管理器，它能让你的页面像导航一样流畅。

1. 安装Vue Router

在项目目录下，输入以下命令来安装Vue Router：

npm install vue-router

2. 配置路由

在项目目录下创建一个名为router的文件夹，然后在里面创建一个文件叫index.js。在这个文件里配置路由：

import Vue from 'vue';


import Router from 'vue-router';


import Home from './components/Home.vue';


import About from './components/About.vue';





Vue.use(Router);





export default new Router({


  routes: [


    {


      path: '/',


      name: 'home',


      component: Home


    },


    {


      path: '/about',


      name: 'about',


      component: About


    }


  ]


});

3. 创建页面组件

在项目目录下创建两个组件文件夹，分别叫做components，然后在里面创建Home.vue和About.vue两个文件。这里有个Home.vue的示例代码：