如何利用webpack4.0搭建一个vue项目
作为一个初学者，记录自己踩过的坑是个好的习惯。我本身比较懒，这里刚好有时间把自己的搭建过程记录一下
这里是参考文章 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项目的更多相关文章
- vue-用Vue-cli从零开始搭建一个Vue项目
Vue是近两年来比较火的一个前端框架(渐进式框架吧). Vue两大核心思想:组件化和数据驱动.组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用:数据驱动是前端的未来发展方向,释放了对 ...
- 完整搭建一个vue项目
目录 一. 搭建一个vue项目的完整步骤 二. 卸载vue-cli 三. 完全卸载webpack 一. 搭建一个vue项目的完整步骤 1.安装node.js 下载地址 # 检查是否安装成功 node ...
- 如何搭建一个VUE项目
搭建环境 搭建node环境 下载 1.进入node.js官方网站下载页,点击下图中框出位置,进行下载即可,当前版本为8.9.4,下载网址为:https://nodejs.org/zh-cn/downl ...
- 如何搭建一个vue项目(完整步骤)
参考资料 一.安装node环境 1.下载地址为:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3.为了提高我们的效率,可以使用淘宝的 ...
- 搭建一个VUE项目
搭建环境 搭建node环境 下载 1.进入node.js官方网站下载页,点击下图中框出位置,进行下载即可,当前版本为8.9.4,下载网址为:https://nodejs.org/zh-cn/downl ...
- 从零开始使用vue-cli搭建一个vue项目及注意事项
一.安装node.js 1.根据电脑的自行下载node.js安装包http://nodejs.cn 2.点击安装,按照正常的的一路点击下去 3.验证安装是否成功,按键win+r,输入cmd打开命令行工 ...
- 使用Vue脚手架(vue-cli)从零搭建一个vue项目(包含vue项目结构展示)
注:在搭建项目之前,请先安装一些全局的工具(如:node,vue-cli等) node安装:去node官网(https://nodejs.org/en/)下载并安装node即可,安装node以后就可以 ...
- 用脚手架搭建一个 vue 项目
一.需要安装 node 环境 下载地址: https://nodejs.org/en/ 中文网: http://nodejs.cn/ 安装后为方便国内使用,可以把 npm 换成 taobao 的 cn ...
- VUE系列一：VUE入门：搭建脚手架CLI（新建自己的一个VUE项目）
一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分 ...
随机推荐
- Winform 界面执行耗时操作--UI卡顿假死问题
UI卡顿假死问题 误区1:使用不同的线程操作UI控件和耗时操作(即,跨线程操作UI控件CheckForIllegalCrossThreadCalls = false;), 注意:此处只是为了记录... ...
- python各种类型日期转换大全
最近写python做各种日期转换比较多,顺便总结一下,先上张图: # 根据字符串类型转日期 返回值类型<class 'time.struct_time'> st_time = time.s ...
- lambda expressions
语法lambda表达式包含下面几个要素:1.逗号分隔的参数列表,如CheckPerson.test(Person p),其中p表示一个Person的对象实例 2.向右箭头 →, 箭头左侧是表达式入参, ...
- .net 多线程之线程取消
//线程取消不是操作线程,而是操作信号量(共享变量,多个线程都能访问到的东西,变量/数据库的数据/硬盘数据) //每个线程在执行的过程中,经常去查看下这个信号量,然后自己结束自己 //线程不能别人终止 ...
- Webpack 学习总结
1.Webpack的特性 webpack 模块打包机,分析你的项目结构,找到JavaScript模块以及其他一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),将其打包为合适的格式以 ...
- 多对多manytomany
----------------------多对多manytomany 要点: 多对多必须有mappedBy,让一个端维护关系 多对多会创建一张关系表,维护关系就是维护第三张表. 所以增加关系,则在集 ...
- 《机器学习实战》之一：knn(python代码)
数据 标称型和数值型 算法 归一化处理:防止数值较大的特征对距离产生较大影响 计算欧式距离:测试样本与训练集 排序:选取前k个距离,统计频数(出现次数)最多的类别 def classify0(inX, ...
- html client websocket
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- （Python基础）字符串操作
以下是我在学习过程中用的一些常用字符串操作的相关列子和具体注释,感兴趣的可以自己动手试试看 #字符串操作 name = 'my name is keep' print(name.capitalize( ...
- one-hot编码理解
one-hot是比较常用的文本特征特征提取的方法. one-hot编码,又称“独热编码”.其实就是用N位状态寄存器编码N个状态,每个状态都有独立的寄存器位,且这些寄存器位中只有一位有效,说白了就是只能 ...