如何利用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
转载于:https://www.cnblogs.com/liuxin-673855200/p/10730822.html
如何利用webpack4.0搭建一个vue项目相关推荐
- 手把手教你从0开始搭建一个vue项目(完结)
前言 上一节webpack实战之(手把手教你从0开始搭建一个vue项目)最后我们完成了css样式的配置: webpack.config.js: const path = require("p ...
- 从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一)
从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一) 1.vue-cli搭建一个可靠成熟的项目 1.介绍 vue-cli 我是去年六月份接触的vue1.0,当时还是个菜逼,当 ...
- MacOS 搭建一个vue项目(完整步骤)
搭建一个Vue项目 一.安装node环境 二.搭建vue项目环境 1.全局安装vue-cli 2.检查是否安装成功 3.创建一个基于 webpack 模板的新项目 4.安装依赖 5.启动项目 三.vu ...
- 如何搭建一个Vue项目和配置环境
如何搭建一个Vue项目和配置环境 一.Vue简介 Vue(读音/vju/, 类似于view) 是一套用于构建用户界面的渐进式框架, 发布于2014年2月.与其它大型框架不同的是, Vue被设计为可以自 ...
- 多个vue项目合并成一个_零基础搭建一个Vue项目,你学会了吗?
这几天利用业余时间做了一个个人项目,后端部分已经搭建好了还差一个前端,经过考虑前端利用Vue来搭建开发,因对Vue不是很熟悉,所以利用网络查找了相关的资料,成功的跑出了第一个Vue页面,写在此作为一个 ...
- vue入门级教程从零搭建一个vue项目
一.安装node环境 1.下载地址为:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3.为了提高我们的效率,可以使用淘宝的镜像:ht ...
- 抛开vue-cli 利用requireJS搭建一个vue项目
---恢复内容开始--- 现在学习vue都是利用脚手架vue-cli快速搭建一个项目,这是非常高效的方法,我是十分推荐的,但是有时候在没有互联网的情况,我们没办法在node环境下,敲一个nmp ins ...
- 搭建一个Vue项目(完整步骤)
一.安装Node环境 具体请参考:http://www.dinganan.cn/nodej安装和配置/ 二.搭建vue项目环境 1.全局安装vue-cli npm install --global v ...
- 如何搭建一个Vue项目
一.在搭建前,首先检查自己的搭建环境 使用cmd,打开命令行,使用node -v指令,查看自己的node版本(是否安装) 使用npm -v指令,查看自己的npm版本(是否安装) 二.搭建Vue项目环境 ...
最新文章
- seg:NLP之正向最大匹配分词
- AI 时代保护儿童刻不容缓!智源研究院发布我国首个儿童人工智能发展原则《面向儿童的人工智能北京共识》...
- 关于线程执行顺序的问题
- 身为java程序员你需要知道的网站(包含书籍,面试题,架构...)
- sublime 解决中文乱码
- HDFS 文件系统NameSpace、副本机制
- 从架构到源码:一文了解Flutter渲染机制
- 产品经理十二时辰:内容过于真实,扎心了!
- 【秘诀】我进公司到现在都尽量避免遇上和同事撞单
- 开源软件的安全性风险_开源安全性,Google惊喜等
- 列表推导式 生成器表达式
- 输入指定答案提示正确C语言,大学C语言课件及复习答案输入输出.ppt
- 【Python】:拓展Queue实现有序不重复队列
- 拓端tecdat|GARCH(1,1),MA以及历史模拟法的VaR比较
- 全国计算机考试cad,全国计算机高新考试AUTO CAD.doc
- 不要眼馋咪蒙一年赚几千万!今天做自媒体依然还来得及!
- iOS 开发 code sign 代码签名深入剖析
- Android 开发笔记___图像按钮__imageButton
- nginx lua读redis
- laravel中提供DB facade(原始查找)、查询构造器、Eloquent ORM三种操作数据库方式