webpack 安装制定版本vue_vue webpack2 升webpack4 - CSDN
精华内容
参与话题
  • Vue-cli生成vue+webpack的项目模板 $ npm install -g vue-cli $ vue init webpack my-project $ cd my-project $ npm install $ npm run dev 这样默认的是Vue2.0,如果要使用Vue 1.X的话,执行下面的操作: $ ...

    用Vue-cli生成vue+webpack的项目模板

    $ npm install -g vue-cli
    $ vue init webpack my-project
    $ cd my-project
    $ npm install
    $ npm run dev

    这样默认的是Vue2.0,如果要使用Vue 1.X的话,执行下面的操作:

    $ npm install -g vue-cli
    $ vue init webpack#1.0 my-project
    $ cd my-project
    $ npm install
    $ npm run dev

    Github地址 https://github.com/vuejs-templates/webpack

    展开全文
  • Vue系列之WebPack与Eslint

    千次阅读 2017-01-23 23:41:14
    上一篇文章,我们在window上搭建了vue的开发环境,windows下搭建vue开发环境,并且创建了项目,我们看到了vue项目的目录结构。工欲善其事,必先利其器,在创建项目的过程中,我们使用了webpack和eslint工具,这一节...

    上一篇文章,我们在window上搭建了vue的开发环境,windows下搭建vue开发环境,并且创建了项目,我们看到了vue项目的目录结构。工欲善其事,必先利其器,在创建项目的过程中,我们使用了webpack和eslint工具,这一节我们就来讲讲这两个工具。

    一、Webpack

    1.Webpack是什么

    Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

    webpack打包流程

    2.Webpack 的特点

    1)代码拆分

    Webpack 有两种组织模块依赖的方式,同步和异步。异步依赖作为分割点,形成一个新的块。在优化了依赖树后,每一个异步区块都作为一个文件被打包。

    2)Loader

    Webpack 本身只能处理原生的 JavaScript 模块,但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样,任何资源都可以成为 Webpack 可以处理的模块。

    3)智能解析

    Webpack 有一个智能解析器,几乎可以处理任何第三方库,无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候,允许使用动态表达式

    require("./templates/" + name + ".jade")

    4)插件系统

    Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的,还可以开发和使用开源的 Webpack 插件,来满足各式各样的需求。

    5)快速运行

    Webpack 使用异步 I/O 和多级缓存提高运行效率,这使得 Webpack 能够以令人难以置信的速度快速增量编译。

    更加细致的解读,请大家参考http://webpackdoc.com/。

    3.Vue项目中的Webpack举例

    Webpack 在执行的时候可以通过指定的配置文件来执行。默认情况下,会搜索当前目录的

    webpack.config.js

    在我们上一节新建的vue工程目录下:


    我们可以看到webpack.base.conf.js文件,这个文件就是我们使用vue init的模板创建的webpack配置文件。在package.json里,已经添加了webpack的依赖。

    打开webpack.base.conf.js:


    通过指定entry,webpack可以知道我们的工程是从哪里开始启动的,非常方便快捷。

    entry: {

    app: './src/main.js'

    }

    二、Eslint

    1.Eslint是什么

    在团队协作中,我们经常会要求团队成员统一代码的风格,会预先制定编码规范,帮助大家规范自己的代码,方便后续的维护。使用 Lint 工具和代码风格检测工具,则可以辅助编码规范执行,有效控制代码质量。

    ESLint是一个QA工具,就是用来避免低级错误和统一代码的风格。它由Nicholas C. Zakas 编写, 2013 年发布第一个版本。

    2.Eslint的特点

    ESLint 主要有以下特点:

    • 默认规则包含所有 JSLint、JSHint 中存在的规则,易迁移;

    • 规则可配置性高:可设置「警告」、「错误」两个 error 等级,或者直接禁用;

    • 包含代码风格检测的规则(可以丢掉 JSCS 了);

    • 支持插件扩展、自定义规则。

    3.Eslint的配置方式

    可以通过以下三种方式配置 ESLint:

    1)使用 .eslintrc文件(支持 JSON 和 YAML 两种语法);

    2)在 package.json中添加 eslintConfig 配置块;

    3)直接在代码文件中定义。

    4.Vue项目中的Eslint举例

    在我们的vue项目中,我们使用第一种方式,在初始化工程的时候默认开启了Eslint,在.eslintrc文件中配置Eslint。


    'arrow-parens': 0,表示的是箭头函数用小括号括起来;

    'generator-star-spacing': 0,表示生成器函数*的前后空格

    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,表示开发环境下使用debugger。

    其他规则遵照标准的Eslint规则。

    接下来我们看一下工程中的一行代码:

    这是我在完整的项目中写的一段js代码,function后面没有空格,这时,保存修改,项目自动编译报错:

    原因在于按照Eslint默认的规则,需要在function后面空格在加括号,修改之后即可编译通过。这种方式对于培养我们写代码的规范是非常有帮助的,希望大家从开始就能养成习惯。

    以上就是这一节的全部内容,下一节,我们正是进入vue的实战环节。

    如果您喜欢我们的文章,点赞就好,欢迎管制我的公众号“充电实践”您的认可是我分享的最大动力。 
                  这里写图片描述

    展开全文
  • vue2.0+webpack搭建开发环境 官方脚手架vue-cli     Vue的作者尤雨溪大神写了一篇《新手向:Vue 2.0 的建议学习顺序》来介绍Vue及相关知识点的学习路线,主要列出了知识点概要,如果你觉得略空洞,可参考我之前...

    第四阶段

    1. vue2.0语法
    2. vue2.0+webpack搭建开发环境
    3. 官方脚手架vue-cli

        Vue的作者尤雨溪大神写了一篇《新手向:Vue 2.0 的建议学习顺序》来介绍Vue及相关知识点的学习路线,主要列出了知识点概要,如果你觉得略空洞,可参考我之前介绍的学习资料,vue的相关资料我会在后面介绍。

        新手向:Vue 2.0 的建议学习顺序尤雨溪

    注:2.0 已经有社区翻译的中文文档 。如果对自己英文有信心,建议直接阅读英文文档。
    此指南仅供参考,请根据自身实际情况灵活调整。

    起步
    1. 扎实的 JavaScript / HTML / CSS 基本功。这是前置条件。
    2. 通读官方教程 (guide) 的基础篇。不要用任何构建工具,就只用最简单的<Script> ,把教程里的例子模仿一遍,理解用法。不推荐上来就直接用 vue-cli 构建项目,尤其是如果没有 Node/Webpack 基础。
    3. 照着官网上的示例,自己想一些类似的例子,模仿着实现来练手,加深理解。
    4. 阅读官方教程进阶篇的前半部分,到『自定义指令 (Custom Directive) 』为止。着重理解 Vue 的响应式机制和组件生命周期。『渲染函数(Render Function)』如果理解吃力可以先跳过。
    5. 阅读教程里关于路由和状态管理的章节,然后根据需要学习 vue-router 和 vuex。同样的,先不要管构建工具,以跟着文档里的例子理解用法为主。
    6. 走完基础文档后,如果你对于基于 Node 的前端工程化不熟悉,就需要补课了。下面这些严格来说并不是 Vue 本身的内容,也不涵盖所有的前端工程化知识,但对于大型的 Vue 工程是前置条件,也是合格的『前端工程师』应当具备的知识。

    前端生态/工程化
    1. 了解 JavaScript 背后的规范,ECMAScript 的历史和目前的规范制定方式。学习 ES2015/16 的新特性,理解 ES2015 modules,适当关注还未成为标准的提案
    2. 学习命令行的使用。建议用 Mac。
    3. 学习 Node.js 基础。建议使用 nvm 这样的工具来管理机器上的 Node 版本,并且将 npm 的 registry 注册表配置为淘宝的镜像源。至少要了解 npm 的常用命令,npm scripts 如何使用,语义化版本号规则,CommonJS 模块规范(了解它和 ES2015 Modules 的异同),Node 包的解析规则,以及 Node 的常用 API。应当做到可以自己写一些基本的命令行程序。注意最新版本的 Node (6+) 已经支持绝大部分 ES2015 的特性,可以借此巩固 ES2015。
    4. 了解如何使用 / 配置 Babel 来将 ES2015 编译到 ES5 用于浏览器环境。
    5. 学习 Webpack。Webpack 是一个极其强大同时也复杂的工具,作为起步,理解它的『一切皆模块』的思想,并基本了解其常用配置选项和 loader 的概念/使用方法即可,比如如何搭配 Webpack 使用 Babel。学习 Webpack 的一个挑战在于其本身文档的混乱,建议多搜索搜索,应该还是有质量不错的第三方教程的。英文好的建议阅读 Webpack 2.0 的文档,比起 1.0 有极大的改善,但需要注意和 1.0 的不兼容之处

    Vue 进阶
    1. 有了 Node 和 Webpack 的基础,可以通过 vue-cli 来搭建基于 Webpack ,并且支持单文件组件的项目了。建议用 webpack-simple 这个模板开始,并阅读官方教程进阶篇剩余的内容以及 vue-loader 的文档,了解一些进阶配置。有兴趣的可以自己亲手从零开始搭一个项目加深理解。
    2. 根据 例子 尝试在 Webpack 模板基础上整合 vue-router 和 vuex
    3. 深入理解 Virtual DOM 和『渲染函数 (Render Functions)』这一章节(可选择性使用 JSX),理解模板和渲染函数之间的对应关系,了解其使用方法和适用场景。
    4. (可选)根据需求,了解服务端渲染的使用(需要配合 Node 服务器开发的知识)。其实更重要的是理解它所解决的问题并搞清楚你是否需要它。
    5. 阅读开源的 Vue 应用、组件、插件源码,自己尝试编写开源的 Vue 组件、插件。
    6. 参考 贡献指南 阅读 Vue 的源码,理解内部实现细节。(需要了解 Flow)
    7. 参与 Vue GitHub issue 的定位 -> 贡献 PR -> 加入核心团队 -> 升任 CTO -> 迎娶白富美…


        看完了尤雨溪大神的学习路线介绍,我来说下我的学习顺序:

    vue语法

        撸官方API,进这个网页https://vuefe.cn/,从“起步”开始,将【基础】、【进阶】篇完全撸一遍,认为太有难度的可暂时略过(不要略太多哦)。不要在乎任何和vue1.x相关的内容,单纯看2.0不会影响你的学习效果。


    vue2.0+webpack搭建开发环境

        结合webpack动手实际做示例,推荐教程《一步步构造自己的vue2.0+webpack环境》


    官方脚手架vue-cli

        之前我们是自己搭建开发环境,其实尤雨溪大神已经为我们准备好了一个通用的脚手架,默认情况下,我们不需要那么麻烦的配置webpack(配置项的原理你要大体明白)。使用npm直接安装脚手架,在此基础上来开发你的项目。这里给出vue-cli的一个开发教程,这里要十分感谢作者,我在学习vue-cli的时候只找到了这一篇系统的教程,就是在此基础上迅速的掌握了vue-cli的整体设计。
        
        教程的第一篇讲解了vue-cli的初始安装,后面两个教程结合vue组件和第三方插件来实现了一个书架项目。
        
        Vue.js2.0从入门到放弃—入门实例(一) 主要讲解vue-cli脚手架的初始化安装
        Vue.js 2.0从入门到放弃—入门实例(二) 结合实例讲解:vue组件、vue-router路由的实现
        Vue.js2.0从入门到放弃—入门实例(三) 结合实例讲解:vue-resource

    展开全文
  • vue-cli3脚手架/单文件/环境搭建

    万次阅读 2018-11-16 19:23:58
    vue3.x版本相对于2.x版本做了许多地方的优化,个人总结主要还是使用上使开发者更加一目了然,配置起来也更加的方便,减少了各种webpack里面的loader的配置.下面一起看一下,3.x版本该如何从搭建到配置再到开发的一个过程...

     

    vue-cli3脚手架/单文件/环境搭建。vue3.x版本相对于2.x版本做了许多地方的优化,个人总结主要还是使用上使开发者更加一目了然,配置起来也更加的方便,减少了各种webpack里面的loader的配置.下面一起看一下,3.x版本该如何从搭建到配置再到开发的一个过程:

    如果你已经搭建好了,请前往vue-config.js(封装了2.x的webpack配置)

    一,安装

    1.如果电脑之前有安装1.x或者2.x的先进行卸载

    npm uninstall vue-cli -g

    2.就是安装3.x,安装完了执行     vue -V    即可查看版本号.

    npm install -g @vue/cli
    # OR
    yarn global add @vue/cli

    3.单文件运行安装(这点比较方面,就是单个的vue文件可以像html那样直接运行了)

    npm install -g @vue/cli-service-global

    二,先看一下单文件如何运行的,最后再深入了解脚手架

    1.我们随便找一个目录,新建一个app.vue文件

    2.打开命令行,执行如下命令(任意一个,多个文件可以制定某一个*.vue文件)

    vue serve app.vue
    
    
    or
    
    
    vue serve

    3.运行之后,hello world完美展示,相对来说,比以前的版本更加的简单粗暴,无须引入任何代码,即可像node一样运行*.vue文件

    三,创建3.x脚手架

    在3.x中有两种脚手架的创建方式,一种就是通过命令行,另外一种则是通过可视化工具,无论哪一种都比较方便,我们先来看第一种:

    1.命令行方式构建:

    vue create demo-vue
    

    这时候会发现有一个可选项,可一通过键盘上下键控制,一个是默认配置,一个是手动配置

    默认的配置里面基本什么内容都没有,只是一个简单的框架,路由,vuex等都需要自己手动去装的,我们这里选择手动安装,

    进入是如下界面,为了方便大家理解,这里进行了注释:

    我们也是通过上下键进行选择,确定选择的插件就按下空格,再次确定就是取消

    根据自己的需要选择安装,选完之后回车就行,再往后就是跟2.x的执行步骤差不多了(有是否使用scss语句/less,是否执行代码检查等等),你也可以一直回车,到最后会让你选择是否保存方案,下次再次创建就不用选择了,十分方便.

    举个例子:

    选择scss

    选择检查只提示错误

    是否保存以后的预设方案

    然后就创建完成了,我们一起看下目录

    最后,cd到这个项目的文件夹,执行启动命令:

    npm run serve
    # OR
    yarn serve

    2.vue ui 可视化创建

    这个来说更加的简单,感觉认识字就行了

    随便找个文件夹,执行 vue ui:

    到这基本搭建完成,还有一个巨大的好处,更加方便管理vue项目,看下图,你就懂了

    学会了请前往 vue-config.js(封装了2.x的webpack配置),准备实战项目

    展开全文
  • webpack 打包 存放到指定位置
  • Vue很难学吗」 对于我这种从0.x版本就开始体验 vuejs 的人来说,当然不算难,那时候没各种脚手架和复杂搭配,仅仅是一个mvvm的解决方案库而已,解决了jq带来的繁琐操作dom痛点,所以就一直用了。 我最早用...
  • Vue.js是什么? 搭建流程 一、利用sublime方式 二、利用npm构建vue项目 Vue.js是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为...
  • Webpack打包font-awesome

    万次阅读 2017-05-13 16:35:33
    使用webpack构建font-awesome或者bootstrap的时候,最常见的一个问题就是构建字体文件的问题。经常会出现无法找到字体文件的问题。下面就讲一下如何正确构建引入字体文件: 1. 首先安装依赖: npm install style-...
  • 刚使用webpack4来构建Vue2的项目环境就遇到了一些内置插件失效和环境依赖库的更新的坑。 webpack4中环境及依赖库的部分版本要求 loader 最低版本要求 功能说明 vue-loader 15.0.0 解析、编译vue单文件...
  • webpack3最新版本配置研究(一)loader

    千次阅读 2017-08-27 21:50:32
    webpack这货还是挺火的,目前前端不管是react和vue都用这个打包,还是挺好用的,本文使用的时webpack2,使用的新配置,有很多旧的配置可能会出现报错,webpack3刚出希望变化不要太大!什么是WebpackWebPack可以看做是...
  • webpack4搭建多页面脚手架(一)

    千次阅读 2018-06-22 17:08:42
    开始的开始步入前端已经一年多了,真心的体会到前端世界变化莫测,从jquery到vue,也算经历了一场大前端的变革。而在这几年,webapck的呼声越来越高。远超gulp,grunt等打包工具。平时使用vue-cli时用得biu顺,等到...
  • 目录 webpack.base.conf.jswebpack.dev.conf.jswebpack.prod.conf.js ...这是一个关于vue 开发的webpack 架构会列举出来 webpack 系列教程 Webpack——令人困惑的地方 Express结合Webpack的全栈自动刷新
  • Vue开发看这里就够了

    万次阅读 2018-03-08 11:09:10
    Vue -渐进式JavaScript框架介绍vue 中文网vue githubVue.js 是一套构建用户界面(UI)的渐进式JavaScript框架库和框架的区别我们所说的前端框架与库的区别?Library库,本质上是一些函数的集合。每次调用函数,实现一...
  • Vue.js 2.0 快速上手精华梳理

    万次阅读 多人点赞 2017-09-03 19:48:27
    自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新手来说,如何高效快速的学习Vue2.0呢。http://www.tuicool.com/articles/raaeeiU Vue基础 对于没有接触过es6和webpack...
  • 目录 ✎VUE学习 ◆VUE学习心路历程 ◆VUE学习视频来源 ➀VUE学习视频百度网盘资源 ...❷ Vue基础语法——创建VUE实例(Create Vue) ❸Vue生命周期(Vue life) ❹Vue组件(Components type) ...
  • Vue 知识点汇总(下)--附案例代码及项目地址

    千次阅读 多人点赞 2020-01-14 01:53:43
    文章目录Vue预备知识与后续知识及项目案例一、简介1.Vue (读音 /vjuː/,类似于 view)的简单认识2.Vue.js安装二、Vue知识量化三、内容1、Webpack 详解什么是Webpack?前端模块化**和grunt/gulp的对比**webpack安装...
  • 1.在sentry官网创建一个sentry账号 2.点击‘继续’按钮,新建项目:(注:vue在Brower下) ... 4.安装插件 cnpm i raven-js -S 使用 因为我们的项目分为开发、测试和生产环境,在build下全局配置三个环境的地址;...
  • Vue CLI介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。 通过 @vue/cli 搭建交互式的项目脚手架。 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。 一个运行时依赖 (@vue/cli-...
  • webpack面试题总结

    万次阅读 2018-11-10 11:49:00
    本文主要是对webpack面试会常被问到的问题做一些总结,且文章会不断持续更新 1.webpack打包原理 把所有依赖打包成一个 bundle.js 文件,通过代码分割成单元片段并按需加载。 2.webpack的优势 (1) webpack 是...
  • Webpack等前端编译环境的出现,才让前端开发结合NodeJS真正进入了工业水平,所以这一章节很重要,对下面知识点和工具的熟悉程度决定了你之后的高度。 第二阶段 ES6 NodeJS webpack、babel ES6    短时间内完全...
1 2 3 4 5 ... 20
收藏数 1,808
精华内容 723
关键字:

webpack 安装制定版本vue