溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
npm init -y 初始化項目
安裝各種依賴項
npm install --save vue 安裝vue2.0
npm install --save-dev webpack@^2.1.0-beta.25 webpack-dev-server@^2.1.0-beta.9 安裝webpack以及webpack測試服務器，默認安裝是1.0版本的，所以必須指定版本號
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">
<h2>{{ msg }}</h2>
<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: red;
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@^2.1.0-beta.25 全局安裝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@^2.1.0-beta.9 全局安裝webpack-dev-server，以便使用webpack-dev-server命令
webpack-dev-server 等待程序運行完畢
在瀏覽器輸入http://localhost:8080/查看頁面
這時修改頁面的代碼，不用刷新瀏覽器直接更改
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
