用vue2.x版本+adminLTE開源框架 搭建後臺應用模版
1、建立工程
npm install --global vue-cli安裝腳手架 vue init webpack vue-adminlte 初始化webpack 專案 cd vue-adminlte 切換專案資料夾下 npm install 安裝依賴庫 npm run dev 執行專案
2、安裝 jquery
npm install jquery —save-dev
並在build/webpack.base.conf.js中, 引入webpack
var webpack = require('webpack');
以及在當前檔案下找到 module.exports 中 》resolve 〉alias 增加 如下
alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'components': path.resolve(__dirname, '../src/components'), 'jquery':path.resolve(__dirname,'../node_modules/jquery/src/jquery') }, //並增加如下: plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "windows.jQuery":"jquery" }) ]
然後在main.js中引入:
import $ from 'jquery' window.$ = $ window.jQuery = $
如果報eslint的錯誤,可能搭建專案時開啟了es > 註釋掉有關eslint檢查
將 createLintingRule 刪掉(去除eslint檢查 首選項 》設定) "vetur.validation.template": false, "eslint.enable": false
不報錯之後 測試一下 看是否真正的引進了jquery
3、安裝bootstrap
npm i [email protected] --save
在build/webpack.base.conf.js中 對比一下看是否齊全:
alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'components': path.resolve(__dirname, '../src/components'), 'jquery':path.resolve(__dirname,'../node_modules/jquery/src/jquery') },
引入: 在main.js中
import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min.js'
4、安裝 font-awesome
npm i font-awesome--save
引入: 在main.js中
import 'font-awesome/css/font-awesome.css'
5、如果過程中報錯 This dependency was not found: * !!vue-style-loader!css-loader。。
npm install stylus-loader css-loader style-loader --save-dev
如果還是如下:
This dependency was not found: * !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-3c7429a2","scoped":false,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../node_。。
安裝如下程式碼
npm i sass-loader --save npm i node-sass--save
6、下載 /安裝 adminLTE
GitHub: https://github.com/almasaeed2...
git下載:git clone https://github.com/almasaeed2...
也可npm安裝:(推薦)
npm i admin-lte --save-dev
引入: 在main.js中
import 'admin-lte/dist/css/AdminLTE.min.css' import 'admin-lte/dist/css/skins/_all-skins.min.css' import 'admin-lte/dist/js/adminlte.min'
7、精簡你的程式碼 測試是否引入 bootstrap、font-awesome
啟動專案 npm run dev
8、那就開始 引用adminLTE中的 你要用的 一些程式碼吧
- 在components下新建starter.vue檔案
- 開啟node-modules》admin-lte》starter.html
- 並複製整段的wrapper內容,放到starter.html中template下
- 再複製 body的class類名 放到index.html中的body中
- 修改路由資訊 src/router/index.js
9、儲存 執行 npm run dev
不用驚慌 開啟App.vue
10、其他什麼 自己需要的頁面 直接拿過來 修修改改吧
node-modules 》admin-lte 》dist