1.vue组件中img标签的src属性绑定数据:

<img :src="img" alt="图片" />

//script
data() {
  img: require('../../static/img/name.png')
}

2.mint-ui的样式文件要在router路由之前引入,否则样式无效

3.vue项目中使用sass 链接

  安装组件依赖:

npm install node-sass --save-dev
npm install sass-loader --save-dev
npm install css-loader --save-dev
npm install style-loader --save-dev //全局引入scss
npm install sass-resources-loader --save-dev

  编辑build下的utils.js文件:(全局引入)

return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/common/style/index.scss')
}
}
),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}

打包:

修改config文件夹下的index.js文件:(两处)

修改build文件夹下的utils.js文件:

修改build文件夹下的webpack.base.conf.js文件

VUE项目注意点的更多相关文章

  1. vue-cli快速构建Vue项目

    vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. vue-cli怎么使用? 安装vue-cli之前,需要先装好vue 和 webpack npm i ...

  2. requirejs + vue 项目搭建2

    上篇是年后的项目搭建的,时间比较仓促,感觉有点low 1.gulp-vue 文件对公用js的有依赖,以后别的同事拿去搭其他项目,估计会被喷 2.不支持vue-loader一样写模版语言和es6语法 最 ...

  3. vue项目目录介绍

    Vue项目目录 初始化项目 vue init webpack []projectname] cd [projectname] npm install vue run dev 目录树 +---build ...

  4. Vue 项目实战系列 (一)

    最近一直在学习Vue,基本的文档看完后就需要进行具体的项目进行练手了,本系列文章主要是将我学习过程记录下来,和大家一起学习交流. 我在git上找到了一个淘票票的Vue项目,项目地址: https:// ...

  5. 简单vue项目脚手架(vue+webpack2.0+vuex+vue-router)

    github地址 使用技术栈 webpack(^2.6.1) webpack-dev-server(^2.4.5) vue(^2.3.3) vuex(^2.3.1) vue-router(^2.5.3 ...

  6. vue项目构建与实战

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 由于vue相对来说比较平缓的学习过程和新颖的技术思路,使其受到了广大前后端开发者的青睐,同时其通俗易 ...

  7. Vue项目搭建完整剖析全过程

    Vue项目搭建完整剖析全过程 项目源码地址:https://github.com/ballyalex 有帮助的话就加个星星呗~!  项目技术栈:vue+webpack+bower+sass+axios ...

  8. 利用webpack构建vue项目

    快速搭建vue项目 一,确认自己有无搭建好node以及npm环境,这些是前提,具体安装方法可参考https://nodejs.org/en/. 二,开始构建项目. 第1步:新建一个文件夹,随意命名. ...

  9. 如何快速把 Vue 项目升级到 webpack3

    由于 webpack3升级后,新增了 Scope Hositing(作用域提升) 功能,据说是对 js的性能提升很大.因此,我们做了一个测试对比,就是 webpack3和 webpack1/2 的性能 ...

  10. vue-修改vue项目运行端口号

    一.导语 最近在研究,左侧是导航,右侧是显示对应的内容,左右可单独滚动,不互相影响,如何实现? 萝卜蹲的游戏大家都玩过,白萝卜蹲,白萝卜蹲,白萝卜蹲完红萝卜蹲,可是若是在含有滚动条的页面的情况下,白萝 ...

随机推荐

  1. ionic3 验证比特币,以太坊,莱特币和其他流行的加密货币地址

    Install ❯❯❯ npm install cryptaddress-validatorionic3 中的引入 import * as cryptaddress from 'cryptaddres ...

  2. 使用mysqlslap进行MySQL压力测试

    使用mysqlslap进行MySQL压力测试发表于236 天前 ? MySQL ? 暂无评论 MySQL从5.1.4版开始带有一个压力测试工具mysqlslap,通过模拟多个并发客户端访问mysql来 ...

  3. Mysql err 1055

    目录: 错误信息 原因分析 解决方案 操作示例 错误信息 [Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause ...

  4. Ubuntu+IntelliJ IDEA+Android 配置NDK环境+openCV

    最近需要将Python人证对比模型移植安卓端.安卓端需要使用openCV简单的人像提取处理.在配置openCV前首先需要配置NDK环境. NDK的介绍(http://www.cnblogs.com/l ...

  5. Servlet(七):session

    Session 学习:问题: Request 对象解决了一次请求内的不同 Servlet 的数据共享问 题,那么一个用户的不同请求的处理需要使用相同的数据怎么办呢?解决: 使用 session 技术. ...

  6. 杭电1532----Drainage Ditches『最大流』

    /* 网络流的最大流问题 刚学习Dinic算法.模版题 */ #include <cstring> #include <cstdio> #include <queue&g ...

  7. Windows的四类消息

    Windows的三类消息1.标准消息宏名称 对映消息 消息处理函数(名称已由系统预设)ON_WM_CHAR WM_CAHR OnCharON_WM_CLOSE WM_CLOSE OnCloseON_W ...

  8. LOJ.6504.[雅礼集训2018 Day5]Convex(回滚莫队)

    LOJ 莫队.发现只需要维护前驱后继就可以了. 但是加入一个点需要找到它当前的前驱后继,很麻烦还带个\(\log\). 但是如果只有删除某个点,只需要更新一下它的前驱后继即可. 用回滚莫队就好惹. 撤 ...

  9. XIV Open Cup named after E.V. Pankratiev. GP of Europe

    A. The Motorway 等价于找到最小和最大的$L$满足存在$S$使得$S+(i-1)L\leq a_i\leq S+i\times L$ 即 $S\leq\min((1-i)L+a_i)$ ...

  10. linux 文件属性(转)

    1.  文件类型 - 普通文件 d 目录文件 l 链接文件 b 块设备文件 c 字符型设备文件 s socket文件 p 管道类型文件 块设备文件主要是指慢速设备,比如hd硬盘,数据主要是分块存储,所 ...