作为一个初学者，记录自己踩过的坑是个好的习惯。我本身比较懒，这里刚好有时间把自己的搭建过程记录一下
这里是参考文章   https://www.jianshu.com/p/1fc5b5151abf
文章里面用的是 yarn  我这里用npm
1  安装 webpack 4.0 和webpack-cli

2 项目初始化
 npm init -d

3安装 vue webpack webpack-dev-server -d
npm i vue webpack webpack-dev-server -d

等个几分钟，啦啦啦

有几个warn，先不用管他 ，

下面是版本

4.新建文件
在项目根目录下新建一个index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

</body>

</html>

在项目根目录下新建一个webpack.config.js

var path = require('path');

var webpack = require('webpack');

module.exports = {};

新建src文件夹目录，并且在src下新建main.js和utils.js，此时目录结构如下：

main.js

var say = require('./utils');

say();

utils.js

module.exports = function say() {

  console.log('hello world');

}

webpack.config.js

var path = require('path');

var webpack = require('webpack');

module.exports = {

  entry: './src/main.js', // 项目的入口文件，webpack会从main.js开始，把所有依赖的js都加载打包

  output: {

    path: path.resolve(__dirname, './dist'), // 项目的打包文件路径

    publicPath: '/dist/', // 通过devServer访问路径

    filename: 'build.js' // 打包后的文件名

  },

  devServer: {

    historyApiFallback: true, //historyApiFallback设置为true那么所有的路径都执行index.html。

    overlay: true // 将错误显示在html之上

  }

};

配置一下package.json的启动命令

运行
npm run dev

ok成功了

再修改一下，让项目自动打开浏览器

5.安装html-webpack-plugin解析html模版(npm i html-webpack-plugin -D)并且配置webpack.config.js文件

6.安装vue-loader和vue-template-compiler解析vue模版(npm i vue-loader vue-template-compiler -D),并且配置webpack.config.js文件

7.在src下新建一个App.vue文件，并且在js中导入，然后导入到index.html

　　
main.js

运行 npm run dev

如何利用webpack4.0搭建一个vue项目的更多相关文章

  1. vue-用Vue-cli从零开始搭建一个Vue项目

    Vue是近两年来比较火的一个前端框架(渐进式框架吧). Vue两大核心思想:组件化和数据驱动.组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用:数据驱动是前端的未来发展方向,释放了对 ...

  2. 完整搭建一个vue项目

    目录 一. 搭建一个vue项目的完整步骤 二. 卸载vue-cli 三. 完全卸载webpack 一. 搭建一个vue项目的完整步骤 1.安装node.js 下载地址 # 检查是否安装成功 node ...

  3. 如何搭建一个VUE项目

    搭建环境 搭建node环境 下载 1.进入node.js官方网站下载页,点击下图中框出位置,进行下载即可,当前版本为8.9.4,下载网址为:https://nodejs.org/zh-cn/downl ...

  4. 如何搭建一个vue项目(完整步骤)

    参考资料 一.安装node环境 1.下载地址为:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3.为了提高我们的效率,可以使用淘宝的 ...

  5. 搭建一个VUE项目

    搭建环境 搭建node环境 下载 1.进入node.js官方网站下载页,点击下图中框出位置,进行下载即可,当前版本为8.9.4,下载网址为:https://nodejs.org/zh-cn/downl ...

  6. 从零开始使用vue-cli搭建一个vue项目及注意事项

    一.安装node.js 1.根据电脑的自行下载node.js安装包http://nodejs.cn 2.点击安装,按照正常的的一路点击下去 3.验证安装是否成功,按键win+r,输入cmd打开命令行工 ...

  7. 使用Vue脚手架(vue-cli)从零搭建一个vue项目(包含vue项目结构展示)

    注:在搭建项目之前,请先安装一些全局的工具(如:node,vue-cli等) node安装:去node官网(https://nodejs.org/en/)下载并安装node即可,安装node以后就可以 ...

  8. 用脚手架搭建一个 vue 项目

    一.需要安装 node 环境 下载地址: https://nodejs.org/en/ 中文网: http://nodejs.cn/ 安装后为方便国内使用,可以把 npm 换成 taobao 的 cn ...

  9. VUE系列一：VUE入门：搭建脚手架CLI（新建自己的一个VUE项目）

    一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分 ...

随机推荐

  1. 记录一次MyEclipse打开jsp文件出现Error的解决办法

    今天正在忙着写项目,在打开一个项目内的jsp文件时发现我亲爱的代码消失了. 最后从网上找到了解决办法,希望可以帮到有需要的人,也作为个人记录 第一步:找到安装路径MyEclipse\configura ...

  2. CentOS 7 install Tensorflow-gpu

    # install TensorFlow GPU on CentOS 7.0# https://www.server-world.info/en/note?os=CentOS_7&p=tens ...

  3. RN—Android 物理返回键监听

    A → B 使用 navigator 导航,用 goBack() 返回的时候传递参数 在 A 页面 this.props.navigation.navigate("B", { ca ...

  4. 协程gevent

    协程,利用线程在等待其他资源期间去执行其他的函数. gevent里面封装了greenlet,greenlet里面封装了yield. from gevent import monkey import g ...

  5. 前端-JavaScript1-8——JavaScript之作业练习

    1.表示气温有两种方法:摄氏度和华氏度.两者的关系是: 编写程序,让用户输入摄氏度,弹出对应的华氏温度. //第一步,让用户输入数字 var sheshidu = parseFloat(prompt( ...

  6. DB2锁与隔离级别

    数据库管理器支持三种一般类别的锁定: 共享(S) 挂起 S 锁定之后,并发应用程序进程只能对数据执行只读操作. 更新(U) 挂起 U 锁定之后,如果并发应用程序进程未声明它们要更新行,那么它们只能对数 ...

  7. [css选择器]总结：IE6不支持的CSS选择符

    转载地址:https://www.wenjiwu.com/doc/zvsbii.html.此文最后也给出了原文地址,但是我点击过去发现是什么赌博彩票的地址,360也弹出小心的提示,所以这里只给出了我转 ...

  8. Redis的过期策略和内存淘汰策略(转)

    Redis的过期策略 我们都知道,Redis是key-value数据库,我们可以设置Redis中缓存的key的过期时间.Redis的过期策略就是指当Redis中缓存的key过期了,Redis如何处理. ...

  9. [UE4]Overlap Event 碰撞事件

    一.对于VR中角色的手模型,一般是在角色中另外添加一个球型碰撞体   二.并且一定要勾选“Generate Overlap Events(触发重叠事件)”选项(默认状态是勾选的) 三.添加开始碰撞事件 ...

  10. 转载一份kaggle的特征工程：经纬度、特征构造、转化率

    转载:https://www.toutiao.com/i6642477603657613831/ 1 如果训练/测试都来自同一时间线,那么就可以非常巧妙地使用特性.虽然这只是一个kaggle的案例,但 ...