VUE+adminTLE 一 整体模块构建

1. 首先创建一个新的vue工程： npm init webpack demo3_vue_admintle

2.新建一个文件jquery-vender.js,jquery提供商。

import $ from 'jquery'

window.$ = $
window.jQuery = $
export default $

3.安装jquery

如果你运行着项目的话就会在控制台，看到

那么我们就行执行一下：npm install --save jquery

4.安装bootstrap3

5.安装font-awesome

6. 安装admin tle

出现错误：

按照指令运行后：

这个时候，会出现找不到依赖的问题，这是因为我安装的adminlte3，却要使用adminlte2.4，所以我会把note_modules目录下的dis文件使用adminlte2.4的dist中的文件将其覆盖。

这个时候，启动完成后，有图片的时候会找不到图片。

将img中的所有文件复制到assets中，使用图片的地方：如下方式引入。

这样就好了，出现如下的图片：

7.复制adminTle中starter.html文件里body里面部分。

8.修改index.html

9.修改路由信息：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import starter from '@/components/starter'

Vue.use(Router)

export default new Router({
  routes: [
    {   
      path: '/',
      name: 'starter',
      component: starter
    },  
    {   
      path: '/hello',
      name: 'HelloWorld',
      component: HelloWorld
    }   
  ]
})

最后

如果你觉得写的还不错，就关注下公众号呗，关注后，有点小礼物回赠给你。
你可以获得5000+电子书，java,springCloud,adroid,python等各种视频教程，IT类经典书籍，各种软件的安装及破解教程。
希望一块学习，一块进步！