npm init -y 初始化項目 //-y 為自動生成package.json，如果需要自行配置，去掉-y即可
安裝各種依賴項
npm install --save vue 安裝vue2.0
npm install --save-dev webpack webpack-dev-server 安裝webpack以及webpack測試服務器 //默認安裝最新版2.x版本
npm install --save-dev babel-core babel-loader babel-preset-es2015 安裝babel，一般的瀏覽器是不認識es6語法的，babel的作用是將es6的語法編譯成瀏覽器認識的語法
npm install --save-dev vue-loader vue-template-compiler 用來解析vue的組件，.vue后綴的文件
npm install --save-dev css-loader file-loader 用來解析css
編寫頁面
新建目錄src，里面新建App.vue
<!-- 簡單寫個title和一個循環 -->
<template>
<div id="example">
<h1>{{ msg }}</h1>
<ul>
<li v-for="n in 5">{{ n }}</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello World!'
}
}
}
</script>
<style scoped>
#example {
background:#000000;
color:#fff;
height: 100vh;
}
</style>
在src目錄下新建main.js
/* 引入vue和主頁 */ import Vue from 'vue' import App from './App.vue' /* 實例化一個vue */ new Vue({ el: '#app', render: h => h(App) })
配置webpack
在根目錄下新建webpack.config.js
/* 引入操作路徑模塊和webpack */ var path = require('path'); var webpack = require('webpack'); module.exports = { /* 輸入文件 */ entry: './src/main.js', output: { /* 輸出目錄，沒有則新建 */ path: path.resolve(__dirname, './dist'), /* 靜態目錄，可以直接從這里取文件 */ publicPath: '/dist/', /* 文件名 */ filename: 'build.js' }, module: { rules: [ /* 用來解析vue后綴的文件 */ { test: /\.vue$/, loader: 'vue-loader' }, /* 用babel來解析js文件並把es6的語法轉換成瀏覽器認識的語法 */ { test: /\.js$/, loader: 'babel-loader', /* 排除模塊安裝目錄的文件 */ exclude: /node_modules/ } ] } }
打包項目
npm install -g webpack 全局安裝webpack，以便使用webpack命令
webpack 用webpack命令打包項目，這是目錄下會多出一個dist文件夾，查看里面會有build.js，發覺里面的es6語法已經被轉化了
最終項目目錄如圖所示
在根目錄下新建index.html，引入build.js
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>vue-webpack</title>
</head>
<body>
<section id="app"></section>
<script src="./dist/build.js"></script>
</body>
</html>
頁面如圖所示
這樣就算打包完成了，但是每修改一次都要重新打包這樣顯然沒有任何效率，於是需要線上的熱重載
npm install -g webpack-dev-server 全局安裝webpack-dev-server，以便使用webpack-dev-server命令
webpack-dev-server 等待程序運行完畢
在瀏覽器輸入http://localhost:8080/查看頁面
這時修改頁面的代碼，不用刷新瀏覽器直接更改
轉載自 https://segmentfault.com/a/1190000008166081 ，感謝博主如此詳細精簡的實例！