第一步:单纯的搭建出来我们的项目,并且通过webpack打包一个bundle.js然后运行起来

步骤:

1、建立项目必要的文件和文件夹(见截图)

2、配置webpack.develop.config.js,指定入口,输出文件

3、在main.js中写代码,App.vue中写代码

4、让我们的项目能运行App.vue

5、打包运行我们的项目

webpack--config webpack.develop.config.js ===>bundle.js

创建template.html 在里面导入bundle.js

在浏览器中运行,即可看到效果

第二步:对我们开发阶段的一个优化(更改源代码就能看到效果)

全局包:webpack-dev-server

本地包:webpack-dev-server  html-webpack-plugin

1、html-webpack-plugin 在内存中,根据参照文件(template.html)生成index.html,注意:模版文件中不需要再自己写代码导入bundle.js

用法见截图

2、webpack-dev-server 在内存中生成一个bundle.js

webpack-dev-server对node封装,运行index.html

指令:

Webpack+Vue构建项目的更多相关文章

  1. vue 构建项目vue-cli

    1.首先得有node和npm的环境,node的下载:http://nodejs.org/download/.安装node之后,npm也自动生成了,显示版本号就意味着安装成功 2.接下来就是安装vue- ...

  2. webpack进阶构建项目(一)

    webpack进阶构建项目(一) 阅读目录 1.理解webpack加载器 2.html-webpack-plugin学习 3.压缩js与css 4.理解less-loader加载器的使用 5.理解ba ...

  3. vue 构建项目遇到的请求本地json问题

    在本地测试的json没有问题,但是打包后,发现json 的路径不对了,变成了绝对路径 解决方法: 建立的json文件需要放置  根目录/static下.如项目名/static/data.json,这边 ...

  4. vue 构建项目 文件引入

    1.vue引用依赖文件.  举例:axios 先安装 axios.如果直接安装 vue-axios 会报错 npm install axios npm install --save axios vue ...

  5. vue 构建项目遇到的问题

    1.我在打包完成后,打开index.html文件发现地址并没有携带路由. config下的 index.js 中的build命令的配置有一个属性叫assetsPublicPath,它的值为‘/’.意思 ...

  6. Vue构建项目

    构建Vue项目 按照官网教程安装 //先安装脚手架 cnpm i -g vue-cli //查看项目目标列表: webpack browserify pwa 等项目模板 vue list //使用we ...

  7. 关于vue构建项目的一些指令

    第一步: brew install nodejs(MAC机子下)  Windows直接官网下载对应版本node.js 第二步: 获取nodejs模块安装目录访问权限(Windows系统忽略)sudo ...

  8. vue构建项目全过程

    1.node版本请更新到6.9.X版本以上,不然npm依赖会出问题 2.命令行里运行npm install --global vue-cli 3.npm install --global webpac ...

  9. 【记录】vue构建项目npm install错误run `npm audit fix` to fix them, or `npm audit` for details

    今天构建vue项目执行npm install初始化后报错 run `npm audit fix` to fix them, or `npm audit` for details 出现这问题控制台会有一 ...

随机推荐

  1. FFMPEG(一) 从V4L2捕获摄像头数据

    系列相关博文: FFMPEG(一) 从V4L2捕获摄像头数据 FFMPEG(二) v4l2 数据格式装换 FFMPEG(三) v4l2 数据编码H264 最近在学习FFMPEG,发现网上的很多例子都是 ...

  2. ONVIF协议测试工具 ONVIF Device Test Tool 29 12.12 最新版

    ONVIF协议测试工具 ONVIF Device Test Tool 29 12.12 最新版 包含文档和工具,本人亲测,好用! http://download.csdn.net/detail/li_ ...

  3. 洛谷【P3908】异或之和

    二进制前置技能:https://www.cnblogs.com/AKMer/p/9698694.html 题目传送门:https://www.luogu.org/problemnew/show/P39 ...

  4. android开发 MyEclipse下测试连接MySQL数据库

    1.首先要加载MySQL驱动包. 步骤:右击项目找到build path->configure build path->libraries——>add External JARs添加 ...

  5. 通过gitweb管理Puppet配置(nginx版本+lighttpd版)

    Puppet路径为:/etc/puppet 软件版本:gitweb-1.7.1-3.el6_4.1.noarch git-1.7.1-3.el6_4.1.x86_64 fcgi-2.4.0-12.el ...

  6. Python:map()、reduce()、filter()的区别

    文章转于:https://blog.csdn.net/goupper1991/article/details/49803355 原文博主:https://blog.csdn.net/goupper19 ...

  7. mybatis 学习三 mapper xml 配置信息

    mapper xml 映射文件 1,select 标签      简单是用就这样,其中resultType 代表从这条语句中返回的期望类型的类的完全限定名或别名.也可以使用resultMap对应的id ...

  8. String/ StringBuilder/ StringBuffer

    1. 首先String不属于8种基本数据类型,String是一个对象. 因为对象的默认值是null,所以String的默认值也是null:但它又是一种特殊的对象,有其它对象没有的一些特性. 2. ne ...

  9. NASA的CTO——开源软件使我们诚实

    Chris C.Kemp,谷歌设置新职位CTO让他领导 原文: NASA's CTO: Open source software keeps us honest 作者: Shawn Freeman 译 ...

  10. Python学习:命令行运行,循环结构

    一.安装配置和运行方法 1.安装OpenCV 3.1: 假设安装目录为"C:\Python34" 2.配置环境变量: 方法一:直接配置:打开"控制面板",搜索& ...