手动搭建Vue之前奏:搭建webpack项目
手动搭建vue项目
- 搭建vue前首先搭建webpack项目
首先你应当安装一下npm以及nodejs
安装完成后,进行如下操作:
// 创建项目根目录
mkdir some_project_name
// 切换到项目目录下
cd some_project_name
// 初始化该项目
npm init -y
// 下载并安装webpack相关包
npm install webpack webpack-cli webpack-dev-server --save-dev
// 手动创建相关的文件夹 --mkdir 中使用 // 或 \
mkdir src\pages src\components src\assets\js src\assets\css src\assets\imgs src\assets\fonts dist build
// 手动创建相关文件 --touch 命令中可以使用 / .
touch index.html src/assets/js/main.js build/webpack.dev.conf.js build/webpack.base.conf.js build/webpack.prod.conf.js
利用IDE编写 index.html 以及 main.js
(index.html)
<!DOCTYPE html>
<html>
<head></head>
<body></body>
<script src="./src/js/bundle.js"></script>
</html>
(src/assets/js/main.js)
(function(){
const promise = new Promise((resolve,reject) =>{
resolve('hello webpack project')
})
promise.then(res =>{
console.log(res);
})
})();
修改package.json中scripts字段
"scripts":{
"dev":"webpack-dev-server --inline --progress --config ./build/webpack.dev.conf.js"
}
编写./build/webpack.dev.conf.js
const path = require('path');
module.exports = {
entry: path.resolve(__dirname,'./src/assets/js/main.js'),
output:{
path: path.resolve(__dirname,'./dist'),
filename: 'js/bundle.js'
}
}
启动项目,并打开浏览器 localhost:8080
npm run dev
控制台如果出现了 'hello webpack project' 字样,说明webpack项目已经可以使用
后续补充 热启动等优化...
手动搭建Vue之前奏:搭建webpack项目的更多相关文章
- Vue.js——60分钟webpack项目模板快速入门
概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...
- Vue.js——60分钟webpack项目模板快速入门
概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...
- vue cli 构建的 webpack 项目设置多页面
1. webpack-dev-server下的设置(npm run dev) ./build/webpack.dev.conf.js 中,修改 new HtmlWebpackPlugin ,一个页面一 ...
- 使用 webpack 手动搭建 vue 项目
webpack 是一个前端工程化打包工具,对于前端工程师来说 webpack 是一项十分重要的技能.下面我们就通过搭建一个 vue 项目来学习使用 webpack 主要环境: node v14.15. ...
- element-ui和npm、webpack、vue-cli搭建Vue项目
一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN ...
- （转）windows环境vue+webpack项目搭建
首先,vue.js是一种前端框架,一般利用vue创建项目是要搭配webpack项目构建工具的,而webpack在执行打包压缩的时候是依赖node.js的环境的,所以,要进行vue项目的开发,我们首先要 ...
- 用vue-cli来搭建vue项目和webpack
vue-cli 用vue-cli来搭建vue项目 第一步:全局安装vue-cli sudo npm install vue-cli -g 第二步:初始化一个项目 vue init webpack-si ...
- 从零开始搭建Electron+Vue+Webpack项目框架，一套代码，同时构建客户端、web端（一）
摘要:随着前端技术的飞速发展,越来越多的技术领域开始被前端工程师踏足.从NodeJs问世至今,各种前端工具脚手架.服务端框架层出不穷,“全栈工程师”对于前端开发者来说,再也不只是说说而已.在NodeJ ...
- 【原创】从零开始搭建Electron+Vue+Webpack项目框架，一套代码，同时构建客户端、web端（二）
摘要:上篇文章说到了如何新建工程,并启动一个最简单的Electron应用.“跑起来”了Electron,那就接着把Vue“跑起来”吧.有一点需要说明的是,webpack是贯穿这个系列始终的,我也是本着 ...
随机推荐
- nginx、apache和tomcat之间的关系和区别
Apache/Nginx 应该叫做 HTTP Server,即安装后生成httpd服务. Tomcat 则是一个 Application Server,或者更准确的来说,是一个「Servlet/JSP ...
- jenkins windows 2.204版,免安装,推荐插件齐备.
windows专用,已安装好推荐插件, 更新了安装源为清华源,也就是说只要官方的插件,你都可以秒速下载了.香不? 解压到一个文件夹,管理员模式运行cmdcd 文件夹名jenkins install这样 ...
- 解决：mui 的 选项卡 + 下拉刷新 功能，在其中嵌入 iframe 后，在 iphone 的情况下，iframe 的内容不能滚动，只显示第一屏内容。
我所遇到的情况是,使用 mui 的 选项卡 + 下拉刷新 功能时,其中有2个页面是嵌入了别的网站的页面,而别个几个是通过 ajax 加载本网站的数据.然后 在其中嵌入 iframe 后,在 iphon ...
- ElementUI 删除 el-table 当前选中行（不是selection列）
一句话即可: this.表格绑定的data.splice(this.$refs.表格的ref.store.states.selection, 1)
- Android开发：界面设计之六大layouts介绍
1.帧布局 FrameLayout: FrameLayout是最简单的布局对象.在它里面的的所有显示对象都将固定在屏幕的左上角,不能指定位置,后一个会直接覆盖在前一个之上显示 因为上面的一段话这个是在 ...
- python爬虫（三） 用request爬取拉勾网职位信息
request.Request类 如果想要在请求的时候添加一个请求头(增加请求头的原因是,如果不加请求头,那么在我们爬取得时候,可能会被限制),那么就必须使用request.Request类来实现,比 ...
- Python学习第十七课——组合
组合1 #组合 1 class Hand: pass class Foot: pass class Trunk: pass class Head: pass class Person: def __i ...
- 外部IC寄存器的位定义
宏定义法:直接就是常量操作 方法1:用#define来定义,方便省事,缺点:系统不做检查 方法2:用enum来定义,可以像#define一样定义常量,同时系统做检查.既可以定义某个位也可以定义几个位的 ...
- Linux centos7 VMware MariaDB安装、Apache安装
一.MariaDB安装 cd /usr/local/src 进入包放置目录 官网下载 wget http://mirrors.tuna.tsinghua.edu.cn/mariadb//mariadb ...
- SRS源码——UDP
srs_app_server.cpp int SrsServer::listen() { int ret = ERROR_SUCCESS; if ((ret = listen_rtmp()) != ...