用Webpack构建Vue项目的实践

最近在内部项目中做了一些基于 vue + webpack 的尝试，在小范围和同事们探讨之后，还是蛮多同学认可和喜欢的，所以通过本篇文章分享给更多人

开始之前，需要安装node环境。（安装过程在此就不啰嗦了）

1、创建基本结构首先我们要创建一个空文件夹（我这里叫todos，你可以随便命名）作为项目的根目录。创建一个没有任何依赖关系的package.json，可以通过命令行 npm init 创建。

配置下基本信息即可。创建一个index.html文件，这个是显示在浏览器中的页面。

注意：1、这里的暂时并不存在；2、的数据会被vue文件填入。创建一个src文件夹，并在文件夹内新建一个main.js文件：

这样我们就完成了一个关于vuejs骨架，但是如何让他运行在浏览器中呢，这个时候我们就需要利用webpack打包成js文件了。

2、基本webpack构建创建一个webpack.config.js的文件：

在命令行中安装webpack：

安装本地库（作为dev dependencies）,需要在package.js中添加devDependencies的部分：

保存后运行：npm install然后，vuejs库安装到你的dependencies中：

最后运行webpack进行打包：

3、vue-loader和.vue文件什么是vue-loader？vue-loader是webpack下loader插件，可以将.vue文件输出成组件。创建一个文件夹叫component，并在文件夹内新建一个app.vue文件，app.vue内容如下：

然后修改main.js的代码，如下：

重新运行一下，我们看到有报错了：

webpack

不知道怎么去处理 .vue 的新语法。所以需要修改下webpack配置文件：

同时，在package.json加入一些库：

新加库以后，再重新npm install下载依赖包，然后重新打包一下：

重新刷新下浏览器就可以看到最新页面了。4、热模块替代/热更新热模块替代或热更新是当今最热门新的技术。它让你保存JavaScript文件，就把对应的组件实时更新。首先，我们需要用webpack的dev server。修改你的devDependencies在package.json.

然后再命令窗口中执行cnpm install。下载好依赖包后，再下载webpack-dev-server，执行命令行cnpm install -g webpack-dev-server，然后把脚本加入到package.json中

运行命令行 npm run dev：

这里看到有一大段内容，我们要运行http://localhost:8080/才能看到效果。在这里值得一提的是：之前我们在webpack.config.js里面是没有设置publicPath的，但是如果使用webpack-dev-server，你会发现，这个不会有更新。我们来试验一下：在package.json文件中，将publicPath注释掉：

app.vue代码如下：

输入命令npm run dev，在浏览器中显示：

当将页面修改成：

刷新浏览器，显示未变。此时，若将publicPath注释取消，重新再输入命令行，刷新浏览器，此时显示更新：

且不需要重新输命令行，修改代码后，都会更新。这个时候你会发现：如果我们修改的时template里面的html，这个时候，浏览器会秒变，并不需要刷新浏览器，比如：

但是如果你是将data数据更新，就必须要刷新下浏览器才行。（在这个地方我花了差不多快半个小时的时候才知道这个情况，我以为是我的代码写得有问题，才发现，原来更新template不需要刷新，而更新里面的data是需要刷新的。至于为什么，我也不知道。）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解用vue-cli来搭建vue项目和webpack

    vue-cli 用vue-cli来搭建vue项目 第一步:全局安装vue-cli sudo npm install vue-cli -g 第二步:初始化一个项目 vue init webpack-simple projectName 第三步:把文件切换到初始化的项目中 cd projectName 第四步:安装依赖 npm install 当然也可以用淘宝镜像cnpm来安装,这样快很多 cnpm install 第五步:运行 npm run dev 完成一个初始化vue项目 webpack 要开

  • webpack构建vue项目的详细教程（配置篇）

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出来,欢迎大神来拍砖... 一.新建一个项目目录,cd /d 定位进去,然后输入npm init,会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行npm init -y 直接跳过,这样就在项目目录下生成了一个package.json文件. 二.接下来就是通过npm安装项目依赖项,命令行输入

  • Vue项目webpack打包部署到服务器的实例详解

    Vue项目webpack打包部署到服务器的实例详解

    Vue项目webpack打包部署到服务器 这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomcat为例. 必须要配置的就是/config/index.js 在vue-cli webpack的模板下的/config/index.js,我们可以看到assetsPublicPath这个键,并且这个东西还出现了两次,我第一次打包的时候,只是修改了最下面的assetsPublicPath,将它从'/'

  • 快速将Vue项目升级到webpack3的方法步骤

    快速将Vue项目升级到webpack3的方法步骤

    前言 由于 webpack3升级后,新增了 Scope Hositing(作用域提升) 功能,据说是对 js的性能提升很大.因此,我们做了一个测试对比,就是 webpack3和 webpack1/2 的性能对比,如下: 测试目标 以下数据是2天随机时段3部手机各2组数据,每组数据都是30次取平均值,为了测试js的解析能力,排除了网络请求的影响 平台:M5 Note Build/MRA58K 系统:android 6.0 时间 before after 2017-08-10 13:00 920 5

  • 详解vue项目优化之按需加载组件-使用webpack require.ensure

    详解vue项目优化之按需加载组件-使用webpack require.ensure

    使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build  会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].js 类似下面的路由代码 router/index.js  路由相关信息,该路由文件引入了多个 .vue组件 import Hello from '@/components/Hello' import Province from '@/components/Province' import Segm

  • 用Webpack构建Vue项目的实践

    用Webpack构建Vue项目的实践

    最近在内部项目中做了一些基于 vue + webpack 的尝试,在小范围和同事们探讨之后,还是蛮多同学认可和喜欢的,所以通过本篇文章分享给更多人 开始之前,需要安装node环境.(安装过程在此就不啰嗦了) 1.创建基本结构首先我们要创建一个空文件夹(我这里叫todos,你可以随便命名)作为项目的根目录.创建一个没有任何依赖关系的package.json,可以通过命令行 npm init 创建. 配置下基本信息即可.创建一个index.html文件,这个是显示在浏览器中的页面. 注意:1.这里的

  • 详解如何提高 webpack 构建 Vue 项目的速度

    前言 最近有人给我的 Vue2 后台管理系统解决方案提了 issue ,说执行 npm run build 构建项目的时候极其慢,然后就引起我的注意了.在项目中,引入了比较多的第三方库,导致项目大,而每次修改,都不会去修改到这些库,构建却都要再打包这些库,浪费了不少时间.所以,把这些不常变动的第三方库都提取出来,下次 build 的时候不再构建这些库,这样既可大大缩短构建时间.那么要怎么去实现呢? 解决方案 DllPlugin 和 DllReferencePlugin 查找了一下资料,发现我们可

  • 使用webpack搭建vue项目及注意事项

    有一句话叫"前人栽树后人乘凉",还有一句话叫"如果说我看得比别人更远些,那是因为我站在巨人的肩膀上".前一句是国人的俗语,后一句是那个发现了"万有引力"定律的牛顿说的.为什么要引用这两句呢?是因为我刚开始用vue的时候,使用的是vue-cli来搭建vue项目,快速又好用:我刚开始用react的时候,使用的是create-react-app来搭建react项目,方便又省事.使用这些已有的脚手架来搭建项目,无可厚非,对于新手来说,也确实能快速构建,不

  • vue-cli构建vue项目的步骤详解

    构建一个 vue 项目最简单的方式就是使用脚手架工具 vue-cli .前端的三大框架都有自己的脚手架工具,其作用就是用配置好的模板迅速搭建起一个项目工程来,省去自己配置 webpack 配置文件的基本内容,大大降低了初学者构建项目的难度.这节我们看看如何使用 vue-cli 构建 vue 项目以及对构建项目的具体分析. 一.环境搭建 node 和 npm 是必不可少的,这里不再介绍. 1.安装 vue-cli $ npm install -g vue-cli 检查是否安装成功: $ vue -

  • 详解如何使用webpack在vue项目中写jsx语法

    本文介绍了如何使用webpack在vue项目中写jsx语法,分享给大家,具体如下: 我们知道Vue 2.0中对虚拟DOM的支持.我们可以通过JavaScript动态的创建元素,而不用在template中写HTML代码.虚拟DOM最终将被渲染为真正的DOM. data: { msg: 'Hello world' }, render (h) { return h( 'div', { attrs: { id: 'my-id' }, [ this.msg ] ); } 渲染后的内容为: <div id=

  • 浅谈webpack编译vue项目生成的代码探索

    浅谈webpack编译vue项目生成的代码探索

    本文介绍了webpack编译vue项目生成的代码探索,分享给大家,具体如下: 前言 往 main.js 里写入最简单的 vue 项目结构如下 import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', template: '<App/>', components: { App } }) App.vue 如下 <template> <div id="app"> &l

  • webpack搭建vue 项目的步骤

    webpack搭建vue 项目的步骤

    前期准备 webpack vue.js npm nodejs ES6语法 由于本文内容是通过npm来加载vue,所以开始之前需安装nodejs环境,安装完成之后再执行以下步骤: 创建项目 mkdir vue-demo cd vue-demo 使用 npm init 命令 生成package.json文件 npm init 大概生成的package.json 如下: { "name": "vue-demo", "version": "1.

  • vue init webpack 建vue项目报错的解决方法

    使用vue init webpack 创建vue项目时报如下错误: vue init webpack my-project C:\Users\computer\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init:60 let template = program.args[0] ^^^ SyntaxError: Block-scoped declarations (let, const, function, class) not yet s

  • 详解webpack打包vue项目之后生成的dist文件该怎么启动运行

    亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run build(在package.json的scripts配置) 执行成功如下图所示: 然后此时你会发现项目下多了一个 dist 文件夹,dist下文件便是项目打包之后生成的文件. 此时我们直接在浏览器中打开index.html,是会报错的,什么都看不到. 2. 安装express-generator生成

随机推荐