Vue-Cli搭建

Vue-Cli搭建

目录

Vue-Cli搭建

Vue router

---

1.搭建新的项目结构，需要一个环境 Node.js

2.下载安装Node.js

3.使用 HbuilderX 搭建一个 vue-cli 项目，选择2.6.10Vue项目

vue-cli 是官方提供的一个脚手架，用于快速生成一个 vue 的项目模板；预先定义好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速；

4.Vue-cli项目中的模块

node—modules ：项目中依赖的模块

index.html:唯一的单页面

components:放置组件，，Vue文件

main.js:项目的全局配置文件

5.在终端使用 npm run serve 启动项目

Vue router 路由组件

1.下载安装Vue router路由组件

命令行输入npm i vue-router@3.5.3进行下载

2.创建router目录，在目录下创建index.js文件

//从node—modules中导入
import Vue from 'vue';
import router from 'vue-router'; /* 导入路由 */
​
//导入自己的Vue
import Login from "../Login.vue";
import Main from "../Main.vue";
import Studentlist from "../views/student/List.vue";
import Majorlist from "../views/major/MajorList.vue";
​
Vue.use(router)
​
/* 定义组件路由 */
var rout = new router({
    routes: [{
            path: '/login',
            name: 'login',
            component: Login  //同上面自己导入的Vue相对应
        },
        {
            path: '/main',
            component: Main,
            //路由嵌套
            children: [{
                    path: '/studentlist',
                    component: Studentlist
                },
                {
                    path: '/majorlist',
                    component: Majorlist
                }
            ]
        }
    ]
});
//导出路由对象
export default rout;
​

3.在 main.js 中配置路由

//第一步 导入路由组件
import router from './router/index.js'
Vue.use(router);
​
//第二步
new Vue({
    render: h => h(App),
    router,
}).$mount('#app')

4.在APP.vue 中添加一个<router-view></router-view>组件，用来切换不同的组件