vue-cli使用笔记
- 安装nodejs
- 安装vue-cli
npm install -g vue-cli - 使用vue-cli初始化项目
vue init webpack my-project - 进到目录
cd my-project - 安装依赖
npm install - 添加sass
npm install node-sass --save-dev
npm install sass-loader --save-dev
打开build文件夹下webpack.base.config.js在rules里面加上
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
在用scss的地方写上<style lang="scss" scoped="" type="text/css"></style>
- 全局引入sass配置文件,不必单个组件引入,安装依赖模块
npm install sass-resources-loader --save-dev
在项目build目录的utils.js添加如下代码:// =========
// SASS 配置
// =========
function resolveResouce(name) {
return path.resolve(__dirname, '../src/common/scss/' + name);
}
function generateSassResourceLoader() {
var loaders = [
cssLoader,
// 'postcss-loader',
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
// it need a absolute path,全局sass文件名称,目录位置存放在resolveResouce函数中
resources: [resolveResouce('var.scss'), resolveResouce('mixins.scss')]
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// =========
// SASS 配置 end
// =========修改utils.js配置
- 开始运行
npm run dev - 设置代理
找到config文件夹中的index.js,在proxyTable字段中添加如下内容,详细配置参考https://github.com/chimurai/http-proxy-middleware - eslint相关配置
添加static文件夹下js文件检查,build文件夹中webpack.base.conf.js文件修改如下:
, resolve('static')
默认eslint会强制不要分号,而js书写规范更好的是强制分号,根目录.eslintrc.js修改如下:
, 'semi': ['error', 'always'] - 打包相关
运行命令:npm run build打包时处理文件为相对路径
方法1:找到config文件夹中的index.js,打开修改assetsPublicPath为“./”
方法2:build文件夹中webpack.prod.conf.js 中output添加参数publicPath:'./'设置config文件夹index.js中productionSourceMap的值为false,也就是设置webpack配置中devtool为false,打包后文件体积可以减少百分之八十!!!!!!!
如何实现打包文件中js、css等的版本控制?
设置build文件夹下的webpack.prod.conf.js中HtmlWebpackPlugin插件配置参数添加hash: true,即会使打包生成的index.html中的js和css路径带有?+随机字符串
vue-cli使用笔记的更多相关文章
- Spring Boot +Vue 项目实战笔记(一):使用 CLI 搭建 Vue.js 项目
前言 从这篇文章开始,就进入真正的实践了. 在前端项目开发中,我们可以根据实际情况不同程度地使用 Vue.利用 Vue CLI(或写成 vue-cli,即 Vue 脚手架)搭建出来的项目,是最能体现 ...
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
- Vue.js 组件笔记
Vue 组件总结笔记 一. 创建组件 1. 使用组件三部曲 ( 创建, 注册, 使用 ) 2. 全局组件:Vue.component('tag', {}); 3. 局部组件: components 属 ...
- vue cli 3.x 项目部署到 github pages
github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...
- @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件
目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- vue cli使用融云实现聊天
公司有个项目要实现一个聊天功能,需求如下图,略显随意 公司最终选择融云这个吊炸天的即时通信,文档详细的一匹,刚开始看文档感觉很详细实现起来也不麻烦,有很多开源的demo可以在线演示和下载 不过我们的项 ...
- Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
- Vue CLI 3使用:浏览器兼容性
package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件),指定了项目的目标浏览器的范围.这个值会被 @babel/preset-env ...
- 基于vue cli 3.0创建前端项目并安装cube-ui
前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...
随机推荐
- .NET 使用 ILRepack 合并多个程序集(替代 ILMerge),避免引入额外的依赖
原文:.NET 使用 ILRepack 合并多个程序集(替代 ILMerge),避免引入额外的依赖 我们有多种工具可以将程序集合并成为一个.比如 ILMerge.Mono.Merge.前者不可定制.运 ...
- EgretWing链接微信开发工具调试问题
EgretWing链接微信开发工具调试问题 EgretWing 编译器支持持三种调试模式,Node.js .Chrome .EgretWing 扩展开发. 开发过程中会遇到工具配置错误. 这就需要在E ...
- SSM 前后端分离 这里controll层的返回值和之前那个不一样
1.先创建实体类: 2.创建mapper层 package cn.kgc.mapper; import cn.kgc.Account;import org.apache.ibatis.annotati ...
- java之spring mvc之页面跳转
1. 如果返回值为ModelAndView,在处理方法中,返回null时,默认跳转的视图名称为请求名.跳转结果会根据视图解析器来跳转. @RequestMapping("/hello.do& ...
- 采用__call__ 实现装饰器模式
装饰器模式在实现中也是很常见的:比如手机贴膜,手机壳 都是为了给手机增加一些额外功能 增加耐操 装饰器模式的本质就是对对象二次包装,赋额外功能 __call__ __call__是python魔术方法 ...
- js对象的深入理解(六)
一.对象的创建(四种模式)1.工厂模式工厂模式示例: function createPerson(name,age){ var obj = { name:name, age:age, sayName: ...
- 遍历js中的数组
可以使用js中的for循环,或者forEach方法:也可以使用Ext中的方法遍历js中的数组 代码如下: /** * 遍历数组 */ var arr = ['越南', '新加坡', '美国', '俄罗 ...
- Maven父子工程,子项目变灰,提示该项目已被移除出maven父工程
最近使用maven的父子工程结构搭建微服务架构时,不知道什么原因, 子工程总是被莫名移除出父工程,然后打包处的项目名变成了灰色, 重启该项目时会提示,“该子项目已被移除,是否删除该项目”,这个 当然不 ...
- PHP实现财务审核通过后返现金额到客户
应用场景: 有这么一个返现的系统,当前端客户发起提现的时候,后端就要通过审核这笔返现订单,才可以返现到客户的账号里. 来看看下面的截图 这里的业务场景就是经过两轮审核:销售审核,财务审核都通过后,后端 ...
- linux中的【;】【&&】【&】【|】【||】说明与用法
原文 “;”分号用法 方式:command1 ; command2 用;号隔开每个命令, 每个命令按照从左到右的顺序,顺序执行, 彼此之间不关心是否失败, 所有命令都会执行. “| ”管道符用法 上一 ...