Vue Loader
Vue Loader 是 webpack 的 loaderoader，可以幫助開發者用組件的概念開發 vue 專案。
若不想使用，想要達到同樣效果，可直接使用 vue cli 建立專案。
使用步驟
- 建立npm套件記錄檔
npm init y
- 安裝webpack
npm install webpack webpack-cli --save-dev
- 建立預設資料夾
mkdir src
mkdir dist
- 加入指令至package.json
"build": "webpack"
- 加入 dist 中的 index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="main.js"></script>
</body>
</html>
- 加入 index.js 至 src 中
- webpack基礎架構完成，後續進入vue環境設定
- 安裝vue loader
npm install -D vue-loader vue-template-compiler
- 加入web.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
mode: 'development',
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
// 它会应用到普通的 `.js` 文件
// 以及 `.vue` 文件中的 `<script>` 块
{
test: /\.js$/,
loader: 'babel-loader'
},
// 它会应用到普通的 `.css` 文件
// 以及 `.vue` 文件中的 `<style>` 块
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
plugins: [
// 请确保引入这个插件来施展魔法
new VueLoaderPlugin()
]
}
- 加入 Vue root 至 index.js 中(記得安裝vue, npm install vue --D)
import Vue from 'vue'
new Vue({
el: '#app',
mounted: function () {
console.log('Hello World');
}
})
- 加入其他轉譯相關套件
npm install babel-core babel-loader --save-dev
npm install vue-style-loader css-loader --save-dev
*. babel-loader改成^7.1.5
- 加入 resolve 至 webpack config 中
resolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
}
- 使用babel預設參數
npm install babel-preset-env babel-preset-vue --save-dev
加入以下設定至 package.json 中
"babel": {
"presets": [
"env",
"vue"
]
}
沒有留言:
張貼留言