Vue-Cli搭建
目录
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>组件,用来切换不同的组件