通过webpack2从0开始配置自己的vue项目 1
PS 阅读者需要node基础、webpack原理知识、vue基础
安装node 这个网上很多教程
打开终端
创建项目
npm init
全局安装:
cnpm i webpack webpack-dev-server -g
在项目里安装
cnpm i webpack --save
定义项目的目录结构
创建一个app文件夹
在app文件夹创建index.html
//index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Webpack Sample Project</title> </head> <body> <div id='root'> </div> <script src="./main.js"></script> </body> </html>
在 app目录创建main.js
var greeter = require('./Getter.js'); document.getElementById('root').appendChild(greeter());
在 app 目录创建Getter.js
module.exports = funtion() { var greet = document.createElement('div'); greet.textContent ='学习 webpack' return greet; };
在项目的顶层创建webpack.config.js
module.exports = { devtool: 'eval-source-map', //配置生成Source Maps,选择合适的选项 entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件 output: { path: __dirname + "/dist", //打包后的文件存放的地方 filename: "[name].js" //打包后输出文件的文件名 }, }
这时候本项目的终端运行 webpack 命令 就会出现一个main.js 这就实现了简单的打包
通过webpack2从0开始配置自己的vue项目 1的更多相关文章
- VSCode配置简单的vue项目
VSCode配置简单的vue项目 https://www.cnblogs.com/wnxyz8023/p/9989447.html 由于最近要使用的项目框架为前后端分离的,采用的是vue.js+web ...
- 使用VSCode配置简单的vue项目
由于最近要使用的项目框架为前后端分离的,采用的是vue.js+webAPI的形式进行开发的.因为之前我没有接触过vue.js,也只是通过视频文档做了一些简单的练习.今天技术主管说让大家熟悉下VSCod ...
- vue的学习--如何使用Intellij IDEA配置并运行vue项目
重新接触vue,开始学习使用IDE对vue项目进行配置和运行项目. 1.前面的准备 一般的教程都能到通过命令行运行npm run dev,并通过结果显示的端口,用浏览器访问自己的vue项目的结果.但是 ...
- 三、使用VSCode配置简单的vue项目
由于最近要使用的项目框架为前后端分离的,采用的是vue.js+webAPI的形式进行开发的.因为之前我没有接触过vue.js,也只是通过视频文档做了一些简单的练习.今天技术主管说让大家熟悉下VSCod ...
- 使用IDEA工具配置和运行vue项目(详细其中的坑)
刚来公司实习发现公司的前端使用的是vue,之前根本就没有听说过.然后一上来就需要看代码,but but 就是没有文档什么的东西, 就需要自己去研读,我就想去运行其中的前端和后端联调起来方便理解,结果在 ...
- 「Vue」vue-cli 3.0集成sass/scss到vue项目
vue-cli 3提供了两种方式集成sass/scss: 创建项目是选择预处理器sass手动安装sass-loader创建项目选择预处理器sass$ vue create vuedemo? Pleas ...
- 配置VSCode开发Vue项目
一.安装VSCode.NodeJS VSCode:https://code.visualstudio.com/ NodeJS:https://nodejs.org/en/ 二.打开VSCode,安装常 ...
- vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境
目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目 ...
- vue项目配置及项目初识
目录 Vue项目环境搭建 Vue项目创建 重构项目依赖 1.需要转移的文件 2.重构依赖 pycharm配置并启动vue项目 vue项目目录结构分析 vue组件(.vue文件) 全局脚本文件main. ...
随机推荐
- 我知道的nginx配置
1.nginx配置文件 2.配置访问域名 #京淘商品管理系统 server { listen 80; server_name manage.jt.com; location / { proxy_pas ...
- pycharm中新建external tools
1.Settings-Tools-External Tools 点击+号 2.Tools settings中的设置如下: Program: $PyInterpreterDirectory$/pytho ...
- CTFcrackTools-V3 - 一款旨在帮助 CTFer 在 CTF 中发挥作用的一个框架
CTFcrackTools-V3 CTFcrackTools重置版 作者:米斯特安全-林晨.摇摆.奶权 米斯特安全团队首页:http://www.hi-ourlife.com/ 部分插件来源:希望团队 ...
- 1,rocketmq 的原理与安装教程
参考文档 http://blog.csdn.net/a19881029/article/details/34446629 https://github.com/alibaba/RocketMQ htt ...
- I2C和I2S的区别和使用方法
I2C(Inter-Integrated Circuit)总线是由PHILIPS公司开发的两线式串行总线,用于连接微控制器及其外围设备.是微电子通信控制领域广泛采用的一种总线标准.它是同步通信的一种特 ...
- JS特效实现微博评论逻辑
实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- python(32)——【shelve模块】【xml模块】
一. shelve模块 json和pickle模块的序列化和反序列化处理,他们有一个不足是在python 3中不能多次dump和load,shelve模块则可以规避这个问题. shelve模块是一个简 ...
- 修改idea打开新窗口的默认配置
使用idea开发maven项目时,发现使用新窗口创建一个项目时,例如file-settings的maven库配置都是用的用户下的maven库,如何配置一个全局的maven配置呢,操作如下: File- ...
- 线程误区-join,wait(里边还是调用的wait)
1.一个线程执行结束后会执行该线程自身对象的notifyAll方法,这个是在jvm中实现的. 2.join的作用是:当我们调用某个线程的这个方法时,这个方法会挂起调用线程,直到被调用线程(thread ...
- vue elementui 引入第三方icon iconfront
elementui框架自带icon在开发大型前端应用时显得捉襟见肘.淘宝开源的iconfront的图标库上有很多优秀的icon图标.elementui支持整合iconfront到应用中,步骤如下: 首 ...