1、vue 模式设置
Vue.config.productionTip = false
阻止启动生产消息,常用作指令
注解:
开发模式:npm run dev是前端自己开发用的
生产模式:npm run build 打包之后给后端放在服务端上用的
上面这行代码的意思 是阻止显示生产模式的消息。
如果没有这行代码,或者设置为true,控制台就会多出这么一段代码。
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
大概意思就是:
你运行的Vu是开发模式。为生产部署时,请确保启用生产模式。
https://blog.csdn.net/boysky0015/article/details/102534229
2、vue插件
插件的使用很简单,使用Vue.use注册后即可全局使用
2.1 引入iview插件
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);
https://www.cnblogs.com/hermit-gyqy/p/10950174.html
2.2 引入vue-router插件
vue-router是Vue.js的路由插件。
使用场景(优劣)原理
适合用于构建单页面应用,基于路由和组件;路由用于设定访问路径,将路径和组件映射起来。
路径之间的切换实际上就是组件的切换。
安装: npm install vue-router --save
使用vue-router插件:
import Router from 'vue-router';
//注册路由
Vue.use(Router);
//实例化路由
const router = new Router({
routes: baseRoutes,
mode: 'history'
});
Vue.config.productionTip = false;
Vue.use(iView);
Vue.use(myPlugin);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: {
App
},
template: '<App/>'
});
2.3 vue-router插件详解
简介
vue-router是基于路由和组件的
路由用于设定访问路径, 将路径和组件映射起来.
在vue-router的单页面应用中, 页面的路径的改变就是组件的切换.
代码解析:
//配置路由
import VueRouter from 'vue-router'
import Vue from 'vue'
//安装插件(插件都要安装的)
Vue.use(VueRouter)
//创建路由对象
const router = new VueRouter({
routes
})
const routes = [
//这里就是配置url和页面之间的映射关系
]
//最后将对象传到vue实例中,就把它挂载到vue实例里
export default router
https://blog.csdn.net/qq_39773416/article/details/101805366
标签解释
mode: ‘history’ //设置模式(保存历史,不然路径就会出现‘#’)
routes: baseRoutes, //设置路由数组
path: ‘/’, //显示路径
name: ‘root’, //显示名称
component: Layout, //
resolve => require([’…/pages/home.vue’], resolve)
这种写法是异步模块获取,打包的时候每次访问这个路由的时候会单调单个文件,
按需加载。还有种写法就是用import,这种是把component打包到一个文件里面,初次就读取全部
https://segmentfault.com/q/1010000017913060/a-1020000017915112
redirect: ‘/home’, //重定向
children: //子路由
2.4 注册组件
注册全局组件
注册一个全局组件语法格式如下:
Vue.component(tagName, options)
tagName 为组件名,options 为配置选项。注册后,我们可以使用以下方式来调用组件:
<tagName></tagName>
创建根实例
new Vue({
el: '#app'
})
注册局部组件
new Vue({
el: '#app',
components: {
// <runoob> 将只在父模板可用
'runoob': Child
}
})
3、export default {} 和new Vue()区别
1.export default 的用法:相当于提供一个接口给外界,让其他文件通过 import 来引入使用。
而对于export default 和export的区别:
在JavaScript ES6中,export与export default均可用于导出常量、函数、文件、模块等,
你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,
将其导入,以便能够对其进行使用,但在一个文件或模块中,export、import可以有多个,export default仅有一个。
如果不使用export default ,使用如下指令也可以。
let是当前作用域下声明变量
var是全局,外层可以调用
对于 new Vue({})部分, 只是创建一个Vue的实例 就是相当于创建一个根组件
https://www.cnblogs.com/nx520zj/p/9617689.html
4、vue布局的入口
<Layout></Layout>
注:一个layout代表着一个一个整体页面,对于RA来说只有一个页面。
子路由只是切换页面中的某一部分。