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 启动项目

gitHub

秒客网

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

相关文章