vue脚手架项目结合adminLTE框架做单页面应用后台管理项目

一. vue脚手架搭建过程
1、首先要安装node.js
window+R打开cmd 输入node -v可以检查是否安装成功以及安装的node版本
2、可以通过npm或cnpm进行安装 ( cnpm相对快些需要下面的指令安装淘宝镜像 )
npm install -g cnpm --registry = https://registry.npm.taobao.org
3、npm install -g vue-cli(即脚手架)
4、现在可以搭建自己的项目了首先建立一个空文件比如：在D盘建立myproject文件夹
通过window+R 进入cmd 首先退出C盘进入D盘再进入新建的项目文件夹，如下图

5、vue init webpack myproject(项目名称) 生成自己的项目
6、npm install 安装依赖会出现以下选择
Project name (my-project) # 项目名称（我的项目）
Project description (A Vue.js project) # 项目描述一个Vue.js 项目
Author 作者（你的名字）
Install vue-router? (Y/n) # 是否安装Vue路由，也就是以后是spa（但页面应用需要的模块）
Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码？ （Y [ yes ] / N [ no ]）
Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint（使用箭头键）
Setup unit tests with Karma + Mocha? (Y/n) # 设置单元测Karma + Mocha？ （Y/ N）
Setup e2e tests with Nightwatch? (Y/n) # 设置端到端测试，Nightwatch？ （Y/ N）
7、现在项目就搭建完成了是不是没有想象中的那么难执行以下命令就可以成功打开项目了
cd myproject
npm run dev
二、如何结合adminLTE框架
1、我们创建一个index.vue用作整个系统的主界面，然后把AdminLTE的index文件中的html复制到index.vue的template中。在index.html中的body标签中加入class="sidebar-mini ajax-template skin-blue" 界面默认蓝色。
2、如果你有AdminLTE的文件应该能在dist中找到css、img、js三个文件夹。把这三个文件夹复制到我们Vue项目的assets中吧。引入的方法在main.js中添加。’

3、因为adminLET是基于bootstrap和jquery的项目所以要安装bootstrap和jquery(2.2.3版本是和adminLTE项目里的保持一致)
npm install [email protected] --save
npm install bootstrap --save
可以在package.json里面看到所以安装的依赖

安装bootstrap不需要配置直接在main.js里面引用即可
安装jquery的时候需要修改项目的webpack配置文件。文件位于项目的build文件夹下，文件名是webpack.base.conf.js。

4、因为adminLTE里面用来图标所以还需要安装font-awesome
npm install font-awesome --save
同样在main.js中引入import ‘font-awesome/css/font-awesome.min.css’
在此项目基本完成了，通过npm run dev打开就可以看到如下图的效果，这是我做自己的项目改变过后的样式

三、项目搭建完成后如何做单页面应用
(1)单页面应用
1、我们把中间空白地方作为容器，这样在点击左侧导航条时只改变中间的组件部分内容（即单页面应用）这样在做后台管理这样页面相对较多复杂的项目时省了很多重复代码用起来简直爽翻了 哈哈

2、可以在components文件下新建一个组件尝试一下如 消息模块messageModal.vue
3、在router文件下的index.js中配置路由
先 import MessageModal from ‘@/components/messageModal’
export default new Router({ routes: [ { path:'/index', component:Index, children:[ {path:'/msg',component:Msg} ] }, ] })
这样在你点击改导航条中间就会出现你在msg.vue中template里面设计的页面
四、项目中用到的一些插件和工具如datetimepicker、qrCode、echarts、百度地图等等简单介绍一两个插件的用法
一、如何在vue 项目中使用echarts
1、安装echarts依赖 npm install echarts -S
2、在main.js中全局引入
import echarts from 'echarts' Vue.prototype.$echarts = echarts
3、在你需要的组件中引入echarts
import echarts from 'echarts'
如果一个组件内要展示多个echarts图标首先在temlate设置2个图表

然后在里面做具体的操作

运行如下图

二、如何在vue项目中使用百度地图
1、 在项目自带的index.html文件中引入

2、在需要用到的地图的组件中

运行结果如下图

三、如何在vue项目中封装公用方法
1、可以在static中创建文件夹js里面创建你要封装方法的js文件如我的项目中我创建了一个专门把后台返回给的英文转变成汉语的方法（封装函数和以往的都一样，最重要的是要export出去）

 function OrderTypeChange(OrderArr) {
        var todayOrder = OrderArr;
        for (var j = 0; j < todayOrder.length; j++) {
            /*判断是否是复合拼单或直发*/
            if (todayOrder[j].multiOrderId != null) {
                if (todayOrder[j].orderType == 'MergeOrder') {
                    todayOrder[j].orderType = '复合拼单';
                }else if(todayOrder[j].orderType == 'DirectOrder'){
                    todayOrder[j].orderType = '复合直发';
                }
            }else{
             ....//省略
            }
    }
    export   OrderTypeChange

2、在需要用到的组件中import引入这个方法即可调用

 import {OrderTypeChange} from '../../static/js/changeChEn.js'

总结：以上就是我在自己的项目中边开发边摸索总结的一些小经验，不足的地方欢迎指点纠正，也希望能帮助到读到这篇博客的你！