vue+webpack搭建基礎項目（非vue-cli）
阿新 • • 發佈：2018-08-28
yarn urn set pan conf render aoe 分享 pre
- 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）