第一步:单纯的搭建出来我们的项目,并且通过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. 【遍历二叉树】11把二叉树转换成前序遍历的链表【Flatten Binary Tree to Linked List】

    本质上是二叉树的root->right->left遍历. +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ...

  2. sws_scale函数的用法-具体应用

    移植ffmpeg过程中,遇到swscale的用法问题,所以查到这篇文章.文章虽然已经过去很长时间,但是还有颇多可以借鉴之处.谢谢“咕咕鐘". 转自:http://guguclock.blog ...

  3. JEECG datagrid 列表检索条件 添加下拉级联功能

    $("#communityId").change( function(){ var id = $(this).children('option:selected').val(); ...

  4. codevs1020 孪生蜘蛛

    1020 孪生蜘蛛   题目描述 Description 在G城保卫战中,超级孪生蜘蛛Phantom001和Phantom002作为第三层防卫被派往守护内城南端一带极为隐秘的通道. 根据防护中心的消息 ...

  5. 【ML】关于神经网络优化问题的随笔记

    1. 为什么不去试着最大化正确分类的图像数量而使用二次代价函数? 在神经网络中,被正确分类的图像数量所关于权重和偏置的函数并不是一个平滑的函数.大多数情况下,对权重和偏执做出的微小变动完全不会影响被正 ...

  6. 洛谷【P1236】算24点

    我对状态空间的理解:https://www.cnblogs.com/AKMer/p/9622590.html 题目传送门:https://www.luogu.org/problemnew/show/P ...

  7. keepalived基本应用解析

    原地址:http://blog.csdn.net/moqiang02/article/details/37921051 概念简单认知: Keepalived:它的诞生最初是为ipvs(一些服务,内核中 ...

  8. Velocity下面的Velocimacros设置

    Velocimacros #macro script element允许模板设计者定义一段可重用的VTL template.Velocimacros广泛用于简单和复杂的行列.Velocimacros的 ...

  9. ssh的两种连接方法(包括无密码访问)

    一.正常连接方法:ssh root@10.0.0.20 二.无密码连接方法(有两台机器:此处我把被连接的称为服务器,另一台则称为客户端): 1.先在服务器添加目录 .ssh: mkdir  .ssh ...

  10. 关于startservice的几个启动返回值的意义

    START_NOT_STICKY 如果服务进程在它启动后(从onStartCommand()返回后)被kill掉, 并且没有新启动的intent传给他, 那么将服务移出启动状态并且不重新生成, 直到再 ...