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 出现这问题控制台会有一 ...
随机推荐
- Agc_006 E Rotate 3x3
题目大意 给定一个$3\times N$的方阵,每个位置的数恰好是每一个$[1,3\times N]$中的数. 初始时,每个位置$[x,y]$填的是$3(y-1)+x,(1\leq x\leq N,1 ...
- ACM学习历程—Hihocoder [Offer收割]编程练习赛1
比赛链接:http://hihocoder.com/contest/hihointerview3/problem/1 大概有一个月没怎么打算法了.这一场的前一场BC,也打的不是很好.本来Div1的A和 ...
- JSP页面跳转
JSP页面跳转 RequestDispatcher.forward() 服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servlet or JSP到 ...
- box head上身旋转问题
现有资源: 1.可旋转上身的动画,旋转角度左右各90度. 2.下身没有旋转动画(腿部左转右转动画) 使用场景: 1.整个模型随鼠标位置旋转,不使用上身旋转动画. 缺点:人物转向动画僵硬. 解决方案: ...
- Bootstrap CSS教程
Bootstrap 教程 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加 ...
- bzoj 2716 [Violet 3]天使玩偶——KDtree
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2716 第三道KDtree!仍旧是模板.还有CDQ分治做法,见下面. 数组迷之开大?(开6e5 ...
- Dockerfile创建MySQL容器
本文目的是创建一个MySQL的image,并且在新创建出来的容器里自动启动mysql服务接受外部连接 步骤: 1. 首先创建一个目录并在目录下创建一个Dockerfile,文件内容如下 FROM ce ...
- 【转】 Pro Android学习笔记(六四):安全和权限(1):签发apk
目录(?)[-] Android安全模型 数字证书签发 Debug的keystore 生产unsigned的apk 为apk进行证书签发 align安装包 使用Export Wizard生成签发的ap ...
- logback 相关
%logger{36} 表示logger名字最长36个字符,否则按照句点分割. %X{key} to get the value that are stored in the MDC map ${lo ...
- Uboot启动参数说明
bootcmd=cp.b 0xc4200000 0x7fc0 0x200000 ; bootm // 倒计时到 0 以后,自动执行的指令 bootdelay=2 baudrate=38400 // 串 ...