1. 安装nodejs
  2. 安装vue-cli
    npm install -g vue-cli
  3. 使用vue-cli初始化项目
    vue init webpack my-project
  4. 进到目录
    cd my-project
  5. 安装依赖
    npm install
  6. 添加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>

  7. 全局引入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配置

  8. 开始运行
    npm run dev
  9. 设置代理
    找到config文件夹中的index.js,在proxyTable字段中添加如下内容,详细配置参考https://github.com/chimurai/http-proxy-middleware
  10. eslint相关配置
    添加static文件夹下js文件检查,build文件夹中webpack.base.conf.js文件修改如下:
    , resolve('static')

    默认eslint会强制不要分号,而js书写规范更好的是强制分号,根目录.eslintrc.js修改如下:
    , 'semi': ['error', 'always']
  11. 打包相关
    运行命令: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使用笔记的更多相关文章

  1. Spring Boot +Vue 项目实战笔记(一):使用 CLI 搭建 Vue.js 项目

    前言 从这篇文章开始,就进入真正的实践了. 在前端项目开发中,我们可以根据实际情况不同程度地使用 Vue.利用 Vue CLI(或写成 vue-cli,即 Vue 脚手架)搭建出来的项目,是最能体现 ...

  2. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  3. Vue.js 组件笔记

    Vue 组件总结笔记 一. 创建组件 1. 使用组件三部曲 ( 创建, 注册, 使用 ) 2. 全局组件:Vue.component('tag', {}); 3. 局部组件: components 属 ...

  4. vue cli 3.x 项目部署到 github pages

    github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...

  5. @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件

    目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...

  6. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  7. vue cli使用融云实现聊天

    公司有个项目要实现一个聊天功能,需求如下图,略显随意 公司最终选择融云这个吊炸天的即时通信,文档详细的一匹,刚开始看文档感觉很详细实现起来也不麻烦,有很多开源的demo可以在线演示和下载 不过我们的项 ...

  8. Vue CLI 3.0脚手架如何在本地配置mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...

  9. Vue CLI 3使用:浏览器兼容性

    package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件),指定了项目的目标浏览器的范围.这个值会被 @babel/preset-env ...

  10. 基于vue cli 3.0创建前端项目并安装cube-ui

    前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...

随机推荐

  1. .NET 使用 ILRepack 合并多个程序集(替代 ILMerge),避免引入额外的依赖

    原文:.NET 使用 ILRepack 合并多个程序集(替代 ILMerge),避免引入额外的依赖 我们有多种工具可以将程序集合并成为一个.比如 ILMerge.Mono.Merge.前者不可定制.运 ...

  2. EgretWing链接微信开发工具调试问题

    EgretWing链接微信开发工具调试问题 EgretWing 编译器支持持三种调试模式,Node.js .Chrome .EgretWing 扩展开发. 开发过程中会遇到工具配置错误. 这就需要在E ...

  3. SSM 前后端分离 这里controll层的返回值和之前那个不一样

    1.先创建实体类: 2.创建mapper层 package cn.kgc.mapper; import cn.kgc.Account;import org.apache.ibatis.annotati ...

  4. java之spring mvc之页面跳转

    1. 如果返回值为ModelAndView,在处理方法中,返回null时,默认跳转的视图名称为请求名.跳转结果会根据视图解析器来跳转. @RequestMapping("/hello.do& ...

  5. 采用__call__ 实现装饰器模式

    装饰器模式在实现中也是很常见的:比如手机贴膜,手机壳 都是为了给手机增加一些额外功能 增加耐操 装饰器模式的本质就是对对象二次包装,赋额外功能 __call__ __call__是python魔术方法 ...

  6. js对象的深入理解(六)

    一.对象的创建(四种模式)1.工厂模式工厂模式示例: function createPerson(name,age){ var obj = { name:name, age:age, sayName: ...

  7. 遍历js中的数组

    可以使用js中的for循环,或者forEach方法:也可以使用Ext中的方法遍历js中的数组 代码如下: /** * 遍历数组 */ var arr = ['越南', '新加坡', '美国', '俄罗 ...

  8. Maven父子工程,子项目变灰,提示该项目已被移除出maven父工程

    最近使用maven的父子工程结构搭建微服务架构时,不知道什么原因, 子工程总是被莫名移除出父工程,然后打包处的项目名变成了灰色, 重启该项目时会提示,“该子项目已被移除,是否删除该项目”,这个 当然不 ...

  9. PHP实现财务审核通过后返现金额到客户

    应用场景: 有这么一个返现的系统,当前端客户发起提现的时候,后端就要通过审核这笔返现订单,才可以返现到客户的账号里. 来看看下面的截图 这里的业务场景就是经过两轮审核:销售审核,财务审核都通过后,后端 ...

  10. linux中的【;】【&&】【&】【|】【||】说明与用法

    原文 “;”分号用法 方式:command1 ; command2 用;号隔开每个命令, 每个命令按照从左到右的顺序,顺序执行, 彼此之间不关心是否失败, 所有命令都会执行. “| ”管道符用法 上一 ...