VUE项目注意点
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项目注意点的更多相关文章
- vue-cli快速构建Vue项目
vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. vue-cli怎么使用? 安装vue-cli之前,需要先装好vue 和 webpack npm i ...
- requirejs + vue 项目搭建2
上篇是年后的项目搭建的,时间比较仓促,感觉有点low 1.gulp-vue 文件对公用js的有依赖,以后别的同事拿去搭其他项目,估计会被喷 2.不支持vue-loader一样写模版语言和es6语法 最 ...
- vue项目目录介绍
Vue项目目录 初始化项目 vue init webpack []projectname] cd [projectname] npm install vue run dev 目录树 +---build ...
- Vue 项目实战系列 (一)
最近一直在学习Vue,基本的文档看完后就需要进行具体的项目进行练手了,本系列文章主要是将我学习过程记录下来,和大家一起学习交流. 我在git上找到了一个淘票票的Vue项目,项目地址: https:// ...
- 简单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 ...
- vue项目构建与实战
关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 由于vue相对来说比较平缓的学习过程和新颖的技术思路,使其受到了广大前后端开发者的青睐,同时其通俗易 ...
- Vue项目搭建完整剖析全过程
Vue项目搭建完整剖析全过程 项目源码地址:https://github.com/ballyalex 有帮助的话就加个星星呗~! 项目技术栈:vue+webpack+bower+sass+axios ...
- 利用webpack构建vue项目
快速搭建vue项目 一,确认自己有无搭建好node以及npm环境,这些是前提,具体安装方法可参考https://nodejs.org/en/. 二,开始构建项目. 第1步:新建一个文件夹,随意命名. ...
- 如何快速把 Vue 项目升级到 webpack3
由于 webpack3升级后,新增了 Scope Hositing(作用域提升) 功能,据说是对 js的性能提升很大.因此,我们做了一个测试对比,就是 webpack3和 webpack1/2 的性能 ...
- vue-修改vue项目运行端口号
一.导语 最近在研究,左侧是导航,右侧是显示对应的内容,左右可单独滚动,不互相影响,如何实现? 萝卜蹲的游戏大家都玩过,白萝卜蹲,白萝卜蹲,白萝卜蹲完红萝卜蹲,可是若是在含有滚动条的页面的情况下,白萝 ...
随机推荐
- eclipse创建maven——初学
1.进入eclipse→File→new→other→搜索maven,如下图: 2.选择一个工作空间,点击Next 3.进入如下页面 4.填写Grop id和Artifact id,Version默认 ...
- JDK 8 函数式编程入门
目录 1. 概述 1.1 函数式编程简介 1.2 Lambda 表达式简介 2. Lambda 表达式 2.1 Lambda 表达式的形式 2.2 闭包 2.3 函数接口 3. 集合处理 3.1 St ...
- 倒影问题(reflect:below)
这个例子灵感来源于实现一个登录框下方的倒影: .box { width: 300px; height: 200px; border: 1px solid #1f637b; -webkit-box-re ...
- python2 安装 MySQL-python
yum -y install mysql-devel libxml2 libxml2-dev libxslt* zlib gcc openssl yum install gcc libffi-deve ...
- IP网际协议
IP分类 IP地址分为网络号和主机号,5类不同的IP地址格式如下: A类地址每个网段内最多有224个,也就是16,777,214个. B类地址每个网段内最多有216个,也就是65535个. C类地址每 ...
- Pyqt walk 在Windows查找文件
在任意目录下查找需要的文件如何操作呢? 其实很简单, WIN+E [桌面计算机]- 右上角“搜索 计算机” 这个就是Windows自带的文件搜索功能.自己做一个文件搜索的应该应该也挺好玩的. 知识要点 ...
- 在.NET开发中的单元测试工具之(1)——NUnit
NUnit介绍 NUnit是一个专门针对于.NET来写的单元测试框架,它是xUnit体系中的一员,在xUnit体系中还有针对Java的JUnit和针对C++的CPPUnit,在开始的时候NUnit和x ...
- jquery动态添加的元素不能直接应用事件方法的时候
对于由 jQuery 动态生成的元素,如用 jQuery 给元素添加 class,或者直接添加一对 p 标签,不能直接绑定常用的事件,如 click.因为这些元素属于动态生成,除非采用 onclick ...
- php代理
有些网上接口请求需要用代理 php代码 <?php header('Access-Control-Allow-Origin:*'); $url=$_POST['urlString']; $res ...
- python基础篇_006_面向对象
面向对象 1.初识类: # 定义一个函数,我们使用关键字 def """ def 函数名(参数): '''函数说明''' 函数体 return 返回值 "&qu ...