vue+webpack搭建基础项目（非vue-cli）

时间：2020-11-27 08:54:51
  1. yarn add vue
  2. yarn add webpack
  3. yarn add webpack-cli
  4. yarn add html-webpack-plugin
  5. yarn add webpack-dev-server
  6. 创建build、src文件夹
  7. 创建index.html文件 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>
  8. 创建src/index.js文件 
    import Vue from 'vue'
new Vue({
  el:'#app',
  render(h){
    return h('div','hello world！')
  }
})
  9. 创建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//自动打开浏览器
  }
}
  10. 在package.json中添加scripts
  11. yarn start 启动项目

vue+webpack搭建基础项目（非vue-cli）gitHub

标签：

相关文章