第一步:单纯的搭建出来我们的项目,并且通过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. BLOB (binary large object)

    BLOB (binary large object),二进制大对象,是一个可以存储二进制文件的容器. 在计算机中,BLOB常常是数据库中用来存储二进制文件的字段类型. BLOB是一个大文件,典型的BL ...

  2. 扩展欧几里得算法(exgcd)

    Bezout定理: 对于任意整数a,b,存在一对整数x,y满足:a*x+b*y=gcd(a,b) 证明如下: 在欧几里得算法的最后一步:b=0,即:gcd(a,0)=a 对于b>0,根据欧几里得 ...

  3. sysbench安装、使用

    二.编译安装 编译非常简单,可参考 README 文档,简单步骤如下:   cd/tmp/sysbench-0.4.12-1.1./autogen.sh./configure --with-mysql ...

  4. chromedriver下载

    https://www.cnblogs.com/vickey-wu/p/6629407.html

  5. 微服务理论之三:RPC框架原理

    RPC调用是面向服务架构场景下进行服务间调用的常用组件,一个完整的RPC调用的流程如图1所示: 图1 RPC调用流程 为了方便RPC调用者和服务者的开发,开发者们开发了很多RPC框架.比较有名的RPC ...

  6. js 面向对象代码

    贴上一段同事写的代码,值的纪念 <script type="text/javascript"> //创建箱子类 function Box(option) { var s ...

  7. CSS之边距合并

    外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 情况1:当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元 ...

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

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

  9. Dialog 自定义使用3(回调点击事件)

    1 , Dialog布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns ...

  10. ANDROID开发中资源文件和资源ID是如何映射的

    http://tweetyf.org/2013/02/mapping_between_res_resid_android.html