暴学VUE之代码讲解
从这一章开始，讲解系统的程序逻辑了。涉及很多vue相关的知识，还有原作者的思路。比较枯燥，而且由于水平有限，我只能把我所知道讲出来，如果有不对的地方请指正。
什么是main.js，他主要干什么用的？App.vue又是干什么用的？main.js 里面的import from又在干嘛？newVue（{}）是干嘛的？里面又需要什么参数，它到底能干什么。在网上搜了一篇博文，解答一些初级的困惑。
vue项目入口
vue项目入口有两个文件：
/src/App.vue 页面布局
/src/main.js 程序逻辑
/src/router/index.js 程序路由信息
App.vue源码
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
@import "./assets/css/main.css";
@import "./assets/css/color-dark.css";
</style>
App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。也是整个项目的关键，app.vue负责构建定义及页面组件归集。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。
- 所有的html代码要放置在template标签里面
- 所有的javascript代码要放置在script标签里面
- 所有的style代码要放置在style标签里面
main.js源码
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import AxiosPlugin from './libs/AxiosPlugin'
import store from './store/'
Vue.use(AxiosPlugin)
Vue.use(ElementUI);
Vue.config.productionTip = false;
//判断是否有token,没有则登陆
router.beforeEach((to, from, next) => {
if (to.path != '/login') {
var token = sessionStorage.getItem('token');
if (token == null) {
next({path:'/login'});
} else {
//根据后台返回的路由进行判断是否合法
var routers = sessionStorage.getItem('routers');
var flag = false;
routers.split("_").forEach( v => {
if(v == to.path) {
flag = true;
}
});
if(flag) {
next();
} else {
next({path:'/home'});
}
}
} else {
next();
}
})
/* eslint-disable no-new */
new Vue({
store,
el: '#app',
router,
template: '<App/>',
components: { App }
})
main.js 程序入口文件，是初始化vue实例并使用需要的插件,加载各种公共组件.
import from 是干嘛的呢？
实际上，importfrom是ES6语法里面的。因为相关知识很多，具体参见博客里ES6里面的import，export。
在这里只是给大家介绍下它在这里的用处。
- import Vue from ‘vue’;
其实最完整的写法是：
import Vue from “…/node_modules/vue/dist/vue.js”;
意思是：因为main.js是在src文件中，所以…/向前一级相对目录查找node_modules，再依次寻找后面的文件。 - import App from ‘./App’;
其实最完整的写法是（相对路径）：
import App from ‘./App.vue’;
推荐这样写，直接路径：
import App from ‘@/App.vue’;
意思其实就是引入我们写好的.vue文件。 - 还可以有
import router from ‘./router’;
import router from ‘./router/index.js’;
import router from ‘@/router/index.js’;
import axios from ‘axios’;
import axios from ‘…\node_modules\axios\dist\axios.js’;
import ‘./less/index’;
import ‘./less/index.less’;
@代表的是src文件夹
小结：在简书上看到有一个人总结的很好：
- import…from…的from命令后面可以跟很多路径格式，若只给出vue，axios这样的包名，则会自动到node_modules中加载；若给出相对路径及文件前缀，则到指定位置寻找。
- 可以加载各种各样的文件：.js、.vue、.less等等。
- 可以省略掉from直接引入。
/router/index.js源码
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import Login from '@/views/login/Login.vue'
Vue.use(Router)
// 登录页面单独写，如下
export const loginRouter = {
path: '/login',
name: 'login',
meta: {
title: 'Login - 登录'
},
component: Login
}
export const appRouter = {
path: '/',
name: 'home',
redirect: '/login',
component: Home,
children: [
{
path: '/home',
title: '首页',
name: 'dashboard',
component: () => import('@/views/Index.vue')
},
//用户管理
{
path: 'user/list',
title: '用户列表',
name: 'userList',
component: () => import('@/views/user/UserList.vue')
},
{
path: 'user/info',
title: '用户信息',
name: 'userInfo',
component: () => import('@/views/user/UserInfo.vue')
},
//example
{
path: 'example/table',
title: 'TABLE',
name: 'exampleTable',
component: () => import('@/views/example/table.vue')
},
{
path: 'example/form',
title: 'FORM',
name: 'exampleForm',
component: () => import('@/views/example/form.vue')
}
]
};
export default new Router({
mode: 'history',
linkActiveClass: 'active',
routes: [loginRouter, appRouter]
})
router index.js 把准备好路由组件注册到路由里
这里还有一些其他的文件意思：
index.html文件入口
src放置组件和入口文件
node_modules为依赖的模块
config中配置了路径端口值等
build中配置了webpack的基本配置、开发环境配置、生产环境配置等