- yarn add vue
- yarn add webpack
- yarn add webpack-cli
- yarn add html-webpack-plugin
- yarn add webpack-dev-server
- 创建build、src文件夹
- 创建index.html文件
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Vue</title></head><body> ???<div id="app"></div></body></html>
- 创建src/index.js文件
import Vue from ‘vue‘new Vue({ ?el:‘#app‘, ?render(h){ ???return h(‘div‘,‘hello world！‘) ?}}) - 创建build/webpack.dev.conf.js文件
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘)module.exports = { ?entry: ‘./src/index‘, ?output: { ???filename:‘./dist/main.js‘ ?}, ?plugins:[new HtmlWebpackPlugin({ ???filename:‘index.html‘, ???template:‘./src/index.html‘, ???inject:true //true夹在在文件尾部 ?})], ?devServer: { ???port:1222, ???open:true//自动打开浏览器 ?}} - 在package.json中添加scripts
- yarn start 启动项目
gitHub
vue+webpack搭建基础项目（非vue-cli）
原文地址：https://www.cnblogs.com/hanxiaoer/p/9550210.html