Vue CLI创建新项目

1、安装Vue CLI 

npm install -g @vue/cli

查看是否安装Vue CLI

vue -V

如果你已经安装了Vue CLI，它会显示Vue CLI的版本号，如：

@vue/cli 4.5.15

2、创建新的Vue项目

vue create my-vue-project

3、进入项目目录

cd my-vue-project

4、启动开发服务器

npm run serve

5、常见问题： 

一、新建多页面，分2中情况

（1）当每个页面完全独立时：直接新建每个页面文件夹，新建入口js文件和Vue实例.vue文件，然后在vue.config.js文件中配置

 页面结构：

- my-vue-project
  - src
    - views
      - about
        - about.vue
        - about.js
      - page
        - page.vue
        - page.js
    - main.js
    - App.vue

  - public
    - index.html
  - vue.config.js

 在vue.config.js文件中配置多页面： 

module.exports = {
  pages: {
    about: {
      entry: 'src/views/about/about.js',
      template: 'public/index.html',
      filename: 'about.html',
    },
    page2: {
      entry: 'src/views/page/page.js',
      template: 'public/index.html',
      filename: 'page.html',
    },
  },
};

（2）当某些页面内部需要切换不同的视图或页面组件时，将页面内部的视图组件组织成一个独立的Vue SPA（单页面应用），然后在多页面应用的某个页面中使用Vue Router进行路由管理

A、安装Vue Router

npm install vue-router

B、配置Vue Router

在项目根目录下创建一个新的文件src/router/index.js，并添加以下内容：

src/router/index.js:

import { createRouter, createWebHistory } from 'vue-router';
import Page from '@/views/page/page.vue';
import About from '@/views/about/about.vue';

const routes = [
  {
    path: '/',
    component: Page,
  },
  {
    path: '/about',
    component: About,
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

C、使用创建的路由，在src/main.js中使用创建的路由：

src/main.js:

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

运行开发服务器并查看效果：

npm run serve