Webpack+Vue构建项目
第一步:单纯的搭建出来我们的项目,并且通过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构建项目的更多相关文章
- vue 构建项目vue-cli
1.首先得有node和npm的环境,node的下载:http://nodejs.org/download/.安装node之后,npm也自动生成了,显示版本号就意味着安装成功 2.接下来就是安装vue- ...
- webpack进阶构建项目(一)
webpack进阶构建项目(一) 阅读目录 1.理解webpack加载器 2.html-webpack-plugin学习 3.压缩js与css 4.理解less-loader加载器的使用 5.理解ba ...
- vue 构建项目遇到的请求本地json问题
在本地测试的json没有问题,但是打包后,发现json 的路径不对了,变成了绝对路径 解决方法: 建立的json文件需要放置 根目录/static下.如项目名/static/data.json,这边 ...
- vue 构建项目 文件引入
1.vue引用依赖文件. 举例:axios 先安装 axios.如果直接安装 vue-axios 会报错 npm install axios npm install --save axios vue ...
- vue 构建项目遇到的问题
1.我在打包完成后,打开index.html文件发现地址并没有携带路由. config下的 index.js 中的build命令的配置有一个属性叫assetsPublicPath,它的值为‘/’.意思 ...
- Vue构建项目
构建Vue项目 按照官网教程安装 //先安装脚手架 cnpm i -g vue-cli //查看项目目标列表: webpack browserify pwa 等项目模板 vue list //使用we ...
- 关于vue构建项目的一些指令
第一步: brew install nodejs(MAC机子下) Windows直接官网下载对应版本node.js 第二步: 获取nodejs模块安装目录访问权限(Windows系统忽略)sudo ...
- vue构建项目全过程
1.node版本请更新到6.9.X版本以上,不然npm依赖会出问题 2.命令行里运行npm install --global vue-cli 3.npm install --global webpac ...
- 【记录】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 出现这问题控制台会有一 ...
随机推荐
- 【二叉树的递归】05二叉树中找任意起点和终点使他们的路径和最大【Binary Tree Maximum Path Sum】
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 给定一个二叉树,寻找值最大的路径. ...
- HihoCoder1663双阶乘的末尾数字([Offer收割]编程练习赛40)(暴力||数学)
时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定正整数x和k,判断是否存在正整数1 ≤ y ≤ x使得x与y同奇偶且(x!!)/(y!!)的个位数字为k. 其中x!! ...
- Maven(3)-利用intellij idea创建maven web项目
本文通过一个例子来介绍利用maven来构建一个web项目.开发工具:intellij idea. 一.新建maven项目 此处选择:Create from archetype.表示从已有的maven模 ...
- centos7 中文乱码解决方法
centos7 中文乱码解决方法 标签(空格分隔): centos7 1.查看安装中文包: 查看系统是否安装中文语言包 (列出所有可用的公共语言环境的名称,包含有zh_CN) # locale -a ...
- ng2 中的全屏与退出全屏
1.进入全屏 launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } el ...
- Mac搭建nginx+rtmp服务器
nginx是非常优秀的开源服务器,用它来做hls或者rtmp流媒体服务器是非常不错的选择,本人在网上整理了安装流程,分享给大家并且作备忘. 一.安装Homebrow 已经安装了brow的可以直接跳过这 ...
- python 基础 字符串格式化
print "hello %s %s" % ('wd','pc') c风格 print "hello {1} {0}".format("wd" ...
- [java] volatile关键字对while循环条件提升问题补充
在java并发编程中,代码如下: volatile boolean asleep; ... while(!asleep){ countSomeSheep(); } 如果此处忘记将asleep变量设置为 ...
- route-显示并设置Linux内核中的网络路由表
route命令 网络配置 route命令用来显示并设置Linux内核中的网络路由表,route命令设置的路由主要是静态路由.要实现两个不同的子网之间的通信,需要一台连接两个网络的路由器,或者同时位于两 ...
- CountDownLatch分析
1 什么是CountDownLatch呢? 先看看官网的定义 :一种同步帮助,允许一个或多个线程等待,直到在其他线程中执行的一组操作完成. 现在由我来解释什么是CountDownLatch吧:比如说我 ...