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类经典书籍,各种软件的安装及破解教程。
希望一块学习,一块进步!