npm install vue-table-with-tree-grid --save

import ZkTable from 'vue-table-with-tree-grid'
Vue.use(ZkTable)
 

npm install vue2-editor --save-dev

npm install wangeditor --save-dev

npm install axios --save-dev

安装样式

less

npm install less less-loader --save-dev

scss

npm install sass node-sass sass-loader -D

全局引用sass

npm install sass-resources-loader --save-dev

npm install vue-style-loader --save-dev

build/utils.js文件的exports.cssLoaders函数内添加如下代码:

exports.cssLoaders = function (options) {
// ... function generateSassResourceLoader () {
var loaders = [
cssLoader,
postcssLoader, px2remLoader, // 若需要则加上这一行,不用就不加
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve(__dirname, '../src/common/scss/variable.scss'),
path.resolve(__dirname, '../src/common/scss/mixins.scss')
]
}
}
]
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
} // ... return {
// ...
sass: generateSassResourceLoader(), // 替换原来的,下同
scss: generateSassResourceLoader(),
// ...
}
}

如果需要修改iview的主题,这部分可以做如下修改

function generateSassResourceLoader () {
var loaders = [
cssLoader,
{
loader: 'less-loader',
options: {
javascriptEnabled: true
}
},
{
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve(__dirname, '../src/assets/less/_theme.less'),
path.resolve(__dirname, '../src/assets/less/_mixins.less')
]
}
}
]
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}

引入iview部分做如下修改

import Vue from 'vue'
import 'iview/dist/styles/iview.css'
import '../../my-theme/index.less'

其它参考官方文档即可.可参考文章: 文章一 文章二

分离css打包

npm install extract-text-webpack-plugin --save-dev

参考:https://www.jianshu.com/p/439764e3eff2

引用cookie

npm install vue-cookie --save

main.js文件中修改

import VueCookie from 'vue-cookie'
Vue.use(VueCookie)
使用

this.$cookie
 
axios 封装
npm install axios --save

工具函数
npm install --save lodash

本地缓存插件
npm install lockr --save-dev

CORS跨域访问解决技术

https://www.cnblogs.com/loveis715/p/4592246.html

http://www.php.cn/js-tutorial-386108.html

滚动条

npm install vue-scroll --save-dev
import Vue from 'vue';
import vuescroll from 'vuescroll';
import 'vuescroll/dist/vuescroll.css'; Vue.use(vuescroll);

http://vuescrolljs.yvescoding.org/zh/guide/getting-started.html#%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B
http://vuescrolljs.yvescoding.org/zh/guide/slot.html#%E4%B8%8B%E6%8B%89%E5%88%B7%E6%96%B0-%E4%B8%8A%E6%8E%A8%E5%8A%A0%E8%BD%BD

第三方插件分离打包

1.webpack.base.conf.js中添加入口(以echarts为例说明)

  entry: {
    app: ['babel-polyfill', './src/main.js'],
    echarts: ['echarts'] // 添加这一行
  }
2.webpack.prop.conf.js中分离打包(以echarts为例说明)
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks (module) {
      // any required modules inside node_modules are extracted to vendor
      return (
        module.resource &&
        /\.js$/.test(module.resource) &&
        module.resource.indexOf(
          path.join(__dirname, '../node_modules')
        ) === 0
      )
    },
    chunks: ['app']
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'echarts',
    chunks: ['vendor'],
    minChunks (module) {
      return (
        module.resource &&
        /\.js$/.test(module.resource) &&
        (/echarts/).test(module.resource)
      )
    }
  }),
这样就可以将echarts从vendor中拆分出来了,vendor和echarts的体积都不会很大,速度不会受到很大的影响
 
 

webpack打包vue项目之后生成的dist文件该怎么启动运行

2. 安装express-generator生成器

执行  $ npm install express-generator -g  进行安装

3. 创建一个express项目

执行  $ express expressDemo (expressDemo是项目名)

4. 进入expressDemo目录,安装项目依赖

$ cd expressDemo

$ npm install

5. 把dist目录下的所有文件复制到express项目的public文件夹下

然后运行 $ npm start 启动expressDemo

打开浏览器,输入 http://localhost:3000 , 就可以看到效果了

参考:https://blog.csdn.net/u014054437/article/details/79981307

http://webpack.css88.com/guides/asset-management.html

vue爬坑之路(插件安装)的更多相关文章

  1. Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求

    Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...

  2. Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli vue ...

  3. Vue 爬坑之路(十二)—— vue-cli 3.x 搭建项目

    Vue Cli 3 官方文档:https://cli.vuejs.org/zh/guide/ 一.安装 @vue/cli 更新到 3.x 之后,vue-cli 的包名从 vue-cli 改成了 @vu ...

  4. Vue 爬坑之路(九)—— 用正确的姿势封装组件

    迄今为止做的最大的 Vue 项目终于提交测试,天天加班的日子终于告一段落... 在开发过程中,结合 Vue 组件化的特性,开发通用组件是很基础且重要的工作 通用组件必须具备高性能.低耦合的特性 为了满 ...

  5. Vue 爬坑之路—— 使用 Vuex + axios 发送请求

    Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios  ...

  6. Vue 爬坑之路(八)—— 使用 Echarts 创建图表

    在后台管理系统中,图表是一个很普遍的元素.目前常用的图标插件有 charts,  Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 一.安装插件 使用 c ...

  7. Vue 爬坑之路(十一)—— 基于 Nuxt.js 实现服务端渲染(SSR)

    直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 ...

  8. (转)Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli 一. ...

  9. Vue 爬坑之路(四)—— 与 Vuex 的第一次接触

    在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式 http://www.cnblogs.com/wisewrong/p/62660 ...

随机推荐

  1. C#深入理解多态

    1.里氏替换原则 1.里氏替换原则:在一个软件系统中,如果子类出现在父类出现的位置,而整个软件功能又没有影响,那么咱们称为里氏替换. 2. 考试题:父类变量指向子类对象!! 3.里氏替换  是     ...

  2. 【js基础】基础数据类型变量为啥有属性?

    1.变量和数值 let a =1 这是一个简单的变量声明,其中"a"是变量,在代码中供程序员或者语法操作的,而1是数值,是我最终需要的东西.为什么不直接使用数值而使用变量?这个就不 ...

  3. useEffect无限调用问题

    1.useEfect()的基本用法 const [test,setTest] = useState(1) const init=()=>{ setTest(2) } useEffect(()=& ...

  4. typeScript基本概念

    我一直认为学习是知识的累加,而前端技术也是进步的.所以学习的重点就是,'它有什么不同,它好在哪里'.这要求我们必须结合之前的经验和知识去学习一门新技术,而不是无情的复制粘贴机器. 首先,ts的官方定义 ...

  5. Sentry 开发者贡献指南 - 前端(ReactJS生态)

    内容整理自官方开发文档 系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本 快速使用 Docker 上手 Sentry-CLI - 30 秒上手 Source Map ...

  6. 转:addChildViewController实现网易新闻首页切换

    本来只是打算介绍一下addChildViewController这个方法的,正好今天朋友去换工作面试问到网易新闻标签栏效果的实现,就结合它,用个小Demo实例介绍一下:(具体解释都写在了Demo里面的 ...

  7. ASP.NET WebApi 依赖 SAP Connector dll 报错

    说明 本地 VS 开发 ASP.NET WebApi 调试运行没有问题,但发布到服务器 IIS 上就报错.结果发现是 SAP 依赖库的问题:sapnco.dll.sapnco_utils.dll. 错 ...

  8. 工作簿拆分(Excel代码集团)

    一个工作簿中包括N个工作表,将各个工作表拆分成工作簿. 工作表数量不定,表内内容不限,拆分后保存于当前文件夹内. Sub Sample() Dim MySheetsCount As Long For ...

  9. lvm 扩容

    总体思路: 逻辑卷要扩容,先扩容对应卷组, 扩容卷组的方式: 添加新的物理卷(磁盘已有分区,扩容后新建分区:或者新加了一块硬盘创建了新的物理卷),vgextend myvg /dev/vdb 扩容,/ ...

  10. 在执行java代码时,设置了断点,然后莫名的没执行完方法内的代码就结束了,此刻一般在出错处代码用try,catch包括起来

    在执行java代码时,设置了断点,然后莫名的没执行完方法内的代码就结束了,此刻一般在出错处代码用try,catch包括起来就能看到是什么异常了,记住try,catch语句的作用