vue爬坑之路(插件安装)
npm install vue-table-with-tree-grid --save
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文件中修改
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为例说明)
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爬坑之路(插件安装)的更多相关文章
- Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...
- Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli vue ...
- Vue 爬坑之路(十二)—— vue-cli 3.x 搭建项目
Vue Cli 3 官方文档:https://cli.vuejs.org/zh/guide/ 一.安装 @vue/cli 更新到 3.x 之后,vue-cli 的包名从 vue-cli 改成了 @vu ...
- Vue 爬坑之路(九)—— 用正确的姿势封装组件
迄今为止做的最大的 Vue 项目终于提交测试,天天加班的日子终于告一段落... 在开发过程中,结合 Vue 组件化的特性,开发通用组件是很基础且重要的工作 通用组件必须具备高性能.低耦合的特性 为了满 ...
- Vue 爬坑之路—— 使用 Vuex + axios 发送请求
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...
- Vue 爬坑之路(八)—— 使用 Echarts 创建图表
在后台管理系统中,图表是一个很普遍的元素.目前常用的图标插件有 charts, Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 一.安装插件 使用 c ...
- Vue 爬坑之路(十一)—— 基于 Nuxt.js 实现服务端渲染(SSR)
直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 ...
- (转)Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli 一. ...
- Vue 爬坑之路(四)—— 与 Vuex 的第一次接触
在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 http://www.cnblogs.com/wisewrong/p/62660 ...
随机推荐
- Java中Date类型与String 类型之间的互相转换
Java中String类型和Date类型之间的转换 我们在注册网站的时候,往往需要填写个人信息,如姓名,年龄,出生日期等,在页面上的出生日期的值传递到后台的时候是一个字符串,而我们存入数据库的时候确需 ...
- Linux core 文件浅析
浅析Linux下core文件 当我们的程序崩溃时,内核有可能把该程序当前内存映射到core文件里,方便程序员找到程序出现问题的地方.最常出 现的,几乎所有C程序员都出现过的错误就是"段错误& ...
- 第46篇-signature_handler与result_handler
在之前介绍为native方法设置解释执行的入口时介绍过,当Method::native_function为空时会调用InterpreterRuntime::prepare_native_call()函 ...
- 解决电脑连接 iPhone 热点没有 IPv6地址的问题
问题描述: 初入 iPhone ,电脑使用 ios 共享的热点无法连接 IPv6 地址.但是,直接在 iPhone 上面打开 https://www.test-ipv6.com/ 完美支持 IPv6 ...
- Spring事务什么时候会失效?
面试官:Spring事务什么时候会失效? 应聘者: 访问权限问题 方法用final修饰 未被Spring管理 错误的传播特性 自己吞了异常 手动抛了别的异常 自定义了回滚异常 方法内部调用 1.访问权 ...
- TPT Fusion平台升级,AUTOSAR及ViL测试功能重装上线
TPT简介 TPT是针对嵌入式系统基于模型的测试工具,特别是针对控制系统的软件功能测试.TPT支持众多业内主流的工具平台和测试环境,可以完成V模式要求所有阶段(MiL-SiL-PiL-HiL-ViL) ...
- Ribbon——负载均衡
一.什么是Ribbon Ribbon是Netflix发布的开源项目,主要功能是提供客户端的软件负载均衡算法,将Netflix的中间层服务连接在一起.Ribbon客户端组件提供一系列完善的配置项如连接超 ...
- Django modules模块
http://www.cnblogs.com/wupeiqi/articles/5246483.html
- c++11之 algorithm 算法库新增 minmax_element同时计算最大值和最小值
0.时刻提醒自己 Note: vector的释放 1. minmax_element 功能 寻找范围 [first, last) 中最小和最大的元素. 2. 头文件 #include <algo ...
- 【LeetCode】899. Orderly Queue 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/orderly- ...