vue+webpack搭建基礎項目(非vue-cli)

來源:互聯網
上載者:User

標籤:file   temp   20px   圖片   dex   pen   create   inject   搭建   

  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 啟動項目

gitHub

vue+webpack搭建基礎項目(非vue-cli)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.