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

时间：2018-08-28 20:28:06 阅读：178 评论：0 收藏：0 [点我收藏+]

标签：file temp 20px 图片 dex pen create inject 搭建

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）

标签：file temp 20px 图片 dex pen create inject 搭建

原文地址：https://www.cnblogs.com/hanxiaoer/p/9550210.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行