第一步:单纯的搭建出来我们的项目,并且通过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. Agc011_F Train Service Planning

    先放题面,再放LHX巨佬题解 接着就是%%%.$orz.Oro.Or2.Otz.OTL.sto.rzo.Jto$.On_.○| ̄|_啊 模拟赛里直接把这道题刚掉了 一题升天·爆踩全场 这题思维跨越度已 ...

  2. hdu 5269 ZYB loves Xor I 分治 || Trie

    题目大意: 长度为\(n\)的数组A.求对于所有数对\((i,j)(i \in [1,n],j \in [1,n])\),\(lowbit(A_i xor A_j)\)之和.答案对998244353取 ...

  3. BZOJ1727:[Usaco2006 Open]The Milk Queue挤奶队列

    我对\(Jhonson\)算法的理解:https://www.cnblogs.com/AKMer/p/9863620.html 题目传送门:https://www.lydsy.com/JudgeOnl ...

  4. shell ## %% 使用说明

    path='apps/home/usr/app/test.txt' a=${path##*/} b=${path#*/} c=${path%%/*} d=${path%/*}············· ...

  5. C#中如何获取汉字的笔画数和汉字的拼音

    以前玩过一个游戏,输入两个人的名字然后点击缘分就能产生一段缘分测试的结果,后来经过分析知道是根据名字笔画数之差来弄的小游戏,于是就在百度上找怎么得到汉字的笔画数,也没找到自己想要的答案,问遍了所有的人 ...

  6. seaweedfs安装配置使用

    Saeweedfs是一个由golang语言开发的分布式对象存储系统,很适合做图片服务器,性能很好,安装操作都很简单,并且可兼容挂载提供路径访问的方式,可以较为便捷的将nginx+nfs此类的文件服务器 ...

  7. Java变量初始化的讲解

    首先需要说明的是Java中的变量分为两种:成员变量和局部变量 其中成员变量又可分为:实例变量(非静态变量)和类变量(静态变量) 局部变量(局部变量的作用时间很短,所以一般是存储在栈中的): 1.形参在 ...

  8. java基础知识(9)---异常

    异 常: 异常:就是不正常.程序在运行时出现的不正常情况.其实就是程序中出现的问题.这个问题按照面向对象思想进行描述,并封装成了对象.因为问题的产生有产生的原因.有问题的名称.有问题的描述等多个属性信 ...

  9. Python-Redis的Hash操作

    Redis的hash是一个string类型的field和value的映射表,特别适合用于存储对象,每个hash可以存储40多亿键值对 hset(name, key, value):创建一个name的类 ...

  10. eclipse安装WTP部署WEB项目

    打开WTP官方安装指南,找到想要的下载站点 http://wiki.eclipse.org/WTP_FAQ#How_do_I_install_WTP.3F 我选择的是http://download.e ...