vue+webpack搭建基础项目(非vue-cli)
- 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 启动项目