用Vue.js创建Vue项目

学习vue

1.创建Vue：创建一个文件夹然后用Powershell窗口中写入：Vue Create yourvueproject （注意文件名小写）然后回车。（注意：如果第一次创建vue项目的话此安装命令不能使用）。

2.在HBuilder X编译器中打开你创建的Vue文件，用终端中写入：npm run serve 运行看你的vue项目。

3.在src文件夹中创建一个Views文件夹在这个Views文件夹中创建你的页面vue文件:如book.vue。

4.在你的vue文件中添加路由：在终端中写入：npm install vue-router。安装完成后在main.js文件中引入路由：

import VueRouter from 'vue-router'
Vue.use(VueRouter)

然后在main.js文件同目录下创建一个router.js文件，在此文件中引入vue页面文件，参考代码：

import Vue from "vue";
import Router from "vue-router";
import Book from "./Views/book.vue";
Vue.use(Router)
export default new Router({
    mode: 'history',
    linkExactActiveClass: 'active',
    routes: [{
        path: "/book",
        name: 'book',
        component: Book
    }
})
此教程请参考：https://router.vuejs.org/zh/installation.html

5.在src文件夹中创建一个components文件夹此文件夹下创建一些在别的页面中常用的部分如：菜单栏，轮播图什么的以及footer等。创建完成后在其他要是使用的页面中引入components下的vue文件。

6.如果要在vue项目中使用样式的话在终端中以下方式添加：npm install vue bootstrap-vue bootstrap，然后再main.js文件中引入此样式（这里我添加的是BootstrapVue官网：https://bootstrap-vue.org/）。