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 ...
随机推荐
- C#深入理解多态
1.里氏替换原则 1.里氏替换原则:在一个软件系统中,如果子类出现在父类出现的位置,而整个软件功能又没有影响,那么咱们称为里氏替换. 2. 考试题:父类变量指向子类对象!! 3.里氏替换 是 ...
- 【js基础】基础数据类型变量为啥有属性?
1.变量和数值 let a =1 这是一个简单的变量声明,其中"a"是变量,在代码中供程序员或者语法操作的,而1是数值,是我最终需要的东西.为什么不直接使用数值而使用变量?这个就不 ...
- useEffect无限调用问题
1.useEfect()的基本用法 const [test,setTest] = useState(1) const init=()=>{ setTest(2) } useEffect(()=& ...
- typeScript基本概念
我一直认为学习是知识的累加,而前端技术也是进步的.所以学习的重点就是,'它有什么不同,它好在哪里'.这要求我们必须结合之前的经验和知识去学习一门新技术,而不是无情的复制粘贴机器. 首先,ts的官方定义 ...
- Sentry 开发者贡献指南 - 前端(ReactJS生态)
内容整理自官方开发文档 系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本 快速使用 Docker 上手 Sentry-CLI - 30 秒上手 Source Map ...
- 转:addChildViewController实现网易新闻首页切换
本来只是打算介绍一下addChildViewController这个方法的,正好今天朋友去换工作面试问到网易新闻标签栏效果的实现,就结合它,用个小Demo实例介绍一下:(具体解释都写在了Demo里面的 ...
- ASP.NET WebApi 依赖 SAP Connector dll 报错
说明 本地 VS 开发 ASP.NET WebApi 调试运行没有问题,但发布到服务器 IIS 上就报错.结果发现是 SAP 依赖库的问题:sapnco.dll.sapnco_utils.dll. 错 ...
- 工作簿拆分(Excel代码集团)
一个工作簿中包括N个工作表,将各个工作表拆分成工作簿. 工作表数量不定,表内内容不限,拆分后保存于当前文件夹内. Sub Sample() Dim MySheetsCount As Long For ...
- lvm 扩容
总体思路: 逻辑卷要扩容,先扩容对应卷组, 扩容卷组的方式: 添加新的物理卷(磁盘已有分区,扩容后新建分区:或者新加了一块硬盘创建了新的物理卷),vgextend myvg /dev/vdb 扩容,/ ...
- 在执行java代码时,设置了断点,然后莫名的没执行完方法内的代码就结束了,此刻一般在出错处代码用try,catch包括起来
在执行java代码时,设置了断点,然后莫名的没执行完方法内的代码就结束了,此刻一般在出错处代码用try,catch包括起来就能看到是什么异常了,记住try,catch语句的作用