声明:本人的所有博客皆为个人笔记,作为个人知识索引使用,因此在叙述上存在逻辑不通顺、跨度大等问题,希望理解。分享出来仅供大家学习翻阅,若有错误希望指出,感谢!
vue-project目录
- node_modules:包文件目录
- public:发布目录
- index.html :项目中唯一的页面文件,所有的vue组件最终都在该页面中展示
- src
- assets:存放静态资源img、css、js等
- components:组件库,所有的以vue为扩展名的文件都存放在这里
- router:路由目录,项目添加了vue router后才有该目录
- store:项目的全局数据中心,项目添加了vuex后才有该目录
- views:存放各种扩展为.vue的组件,这些组件是页面级的,可以包含components目录中的组件
- App.vue:vue入口组件文件,初始页面组件,该页面组件被挂载到唯一的index.html文件中
- main.js:该文件是系统的启动文件。所以和整个项目相关的配置或代码都要在这个文件中编写
- .gitignore:利用git上传时的忽略文件
- babel.config.js:js高级版本改写设置文件,该文件添加了babel后才有
- package-lock.json:包管理文件的锁定版本
- package.json:npm生成的包管理文件
- README.md:github.com中的传统自述文件
views和components的区别:
- components是小组件,views是页面级组件
- 小组件components可被引用在views中,一般views组件不被复用
vue文件交互
import为导入指令,export为导出指令,import能够导入的数据,仅限于指定文件export导出的数据
import和export都是JavaScript代码,在js文件或<script>标签里都可以使用
utils.js
文件:
//部分导出,将两个方法分别用export导出
export function helloWorld(){conselo.log("Hello World");}
export function test(){conselo.log("this's test function");}
//全部导出
var helloWorld=function(){conselo.log("Hello World");}
var test=function(){conselo.log("this's test function");}
export default{ //将文件中定义的数据作为一个对象导出
helloWorld,
test
}
PS:一个文件中可以有多个export,但是只能有一个export default
other.js
文件:
//部分导入
import {helloWorld} from "./utils.js" //只导入utils.js中的helloWorld方法
helloWorld(); //执行utils.js中的helloWorld方法
//全部导入
import utils from "./utils.js" //此处utils只是一个变量名,可以随便起名
utils.helloWorld(); //使用import的变量名访问导入的数据
PS:import引入一个依赖包,不需要相对路径,import引入一个自己写的js文件,是需要相对路径的
import axios from ‘axios’;
import AppService from ‘./appService’;
单页VUE结构
<template>
<div>html代码</div>
<otherComponent>可以使用子组件</otherComponent>
</template>
<script type="text/ecmascript-6">
import otherComponent from './otherComponent.vue' //将需要使用的组件import进来
export default {
data:function(){
return{
// 数据
};
},
components:{
otherComponent // 局部组件注册,需事先将所需的组件import进来
},
computed:{
// 计算属性
},
watch:{
// 数据监听
},
methods:{
// 方法定义
}
}
</script>
<style>
// css 样式
</style>
- export default 的对象为组件注册时的对象,其中的属性不止上述这些
- 注意data必须是函数(只有vue实例的data是对象)
- data要么不写,要写就必须是:data:function(){ return {}; },必须返回一个对象
简单路由(插件基本使用框架)
在创建Vue项目时,如果选择了Vue-Router选项,则Vue就会自动安装路由插件:Vue-Router
安装该插件后,基于SPA的Vue项目就可以在不同的组件页面之间跳转,从而模拟原来多页面应用
实际上就是当点击某个菜单时,页面展示出和网页的跳转完全一样的效果。但其本质是不同页面组件之间的切换
创建路由对象的过程
src/router/index.js
文件:
import Vue from 'vue'
import VueRouter from 'vue-router' //导入路由插件
import Home from '../views/Home.vue' //导入组件页面
Vue.use(VueRouter) //设置在vue中注册路由插件
const routes = [ //路由数组,存储着当前项目的路由信息
{
//该对象的含义:当路由路径为 / 时显示 Home 组件
path: '/', //路由路径
name: 'Home', //路由名称
component: Home //当前路由路径所对应的组件(该组件必须事先import,见第三行)
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue') //懒加载方式,需要时才加载(该组件不需事先import)
}
]
const router = new VueRouter({ //创建一个路由实例对象,将上方定义的路由数组作为参数传递给构造器
mode: 'history', //优化url显示效果
base: process.env.BASE_URL, //基本的路由请求的路径,会在所有路由路径之前加上该路径
routes
})
export default router //导出实例对象
路由数组 routes 中的每个元素都是对象,其中包含三个基本属性:path,name,component,其核心含义是:某个path,对应一个具体的页面组件
路由数组 routes 中路径为/
的路由对象为<router-view>
的默认显示路由
页面组件可以有两种加载方式:
- 直接加载,和导入普通的JS文件是一样的使用ESM进行
- 懒加载,此时component属性,成为一个函数,该函数将在路径变成当前时运行,该函数运行时页面组件才会被加载进来
{
path:'/example',
name:'Example',
component:() => import('../views/Example.vue')
}
src/main.js
文件:
import Vue from 'vue'
import App from './App.vue'
import router from './router' //将路由对象导入
import store from './store'
Vue.config.productionTip = false //阻止启动生产消息,启动开发模式(提供报错信息)
new Vue({
router, //将路由对象添加到vue实例中,此处是ES6写法,原为router:router
store,
render: h => h(App) //把App.vue组件添加到虚拟dom中
}).$mount('#app') //将虚拟DOM实体化并挂载到index.html文件中#app所对应的元素中
/*在创建一个vue实例的时候(var vm = new Vue(options))。Vue的构造函数将自动运行 this._init(启动函数)。启动函数的最后一步为initRender(vm):
initRender中调用vm.mount(vm.options.el),将实例挂载到dom上,至此启动函数完成*/
render: h => h(App):
render是一个方法,自带一个形参createElement,这个参数也是一个方法,是用来创建vue 节点的,也就是html模板的,然后渲染(render)到指定的节点上。render: h => h(App)相当于将App.vue渲染到vue对象的挂载点#app上
ES6函数简写:
(a,b) => {函数体}
相当于function(a,b){函数体}
若只有一个形参,函数体只有一行,则可简写为:
a => 代码行
利用路由对象实现的“页面跳转”
router-link标签
- 相当于一个a标签,其中的属性to,就是转向具体的路由地址,路由地址是路由数组中每个路由对象的path属性
- 在最终页面中,该标签实际上就是一个a标签
router-link标签样式
- 直接使用标签选择器router-link是没有用的
- 由于router-link标签最终被渲染为a标签,因此可以使用a作为标签选择器
router-view标签
- 实际上就是一个插件点,页面组件将被插入到该位置