创建vue项目的详细步骤

在桌面上新建一个文件夹

在vscode里面打开这个文件夹，上方 终端-新建终端

vue 文档：https://cli.vuejs.org/zh/guide/installation.html

1、安装脚手架

在终端中输入：

npm install -g @vue/cli

完成后可以输入以下命令检查是否安装成功

vue --version

2、创建项目

输入以下命令

vue create hello-world

选择vue2，等待文件创建成功

3、打开app.vue

在src里面找到app.vue，将里面的内容改为如下

里面的script、style等直接删掉就行

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

4、新建router文件夹

在src文件夹里面新建router文件夹(和app.vue 平级)

在router文件夹里面新建index.js文件

输入以下代码

import Vue from "vue";
import VueRouter from "vue-router";
import home from "../views/home.vue";
Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    redirect: '/home'
  },
  {
    path: "/home",
    name: "home",
    component: home,
    meta: {
      title: '首页',
    }
  },
];

const router = new VueRouter({
  mode: "history",
  routes
});

export default router;

5、新建views文件夹

在src里面新建views文件夹

在里面新建home.vue文件，文件模板如下

<template></template>
<script>
</script>
<style scoped></style>

6、引入 router

在main.js中引入 router

import router from './router/index'

在new Vue里面写上 router,

7、安装依赖

在终端中输入

npm install vue-router

8、配置路由和页面

1、在views文件夹里面新建vue文件，例如news.vue

2、在index.js里面添加这个页面

9、启动项目

输入下面的命令启动项目

npm run serve

运行完毕后复制链接，例如：http://192.168.1.200:8080/