手動搭建 Vue 2 開發環境
tags: Web
Vue
Webpack
環境設定
category: Front-End
description: 手動搭建 Vue 2 開發環境
created_at: 2021/06/30 16:00:00
現在不是 Vue 3 了嗎,為什麼還要寫 Vue 2 ?
因為我 Vue 3 還不是寫的很習慣
事前準備
- 裝好 Node.js
初始化專案
$ npm init -y
裝 Webpack
$ npm i -D webpack webpack-cli
改一下你的 package.json,增加編譯的指令
{
...,
"scripts": {
"dev": "webpack --mode=development",
"watch": "webpack --mode=development --watch",
"build": "webpack --mode=production"
},
...
}
裝 Babel
$ npm i -D @babel/core @babel/preset-env babel-loader
裝 Vue
$ npm i vue@2
$ npm i -D [email protected] [email protected] rollup-plugin-vue@5 @vue/compiler-sfc
把剩下該載的 Loader 載一載 (假設我想用sass)
$ npm i -D sass-loader css-loader style-loader file-loader node-sass
然後在你的資料夾裡面建立 webpack.config.js
填入一些內容
const path = require('path');
const {VueLoaderPlugin} = require('vue-loader')
module.exports = {
entry: './src/app.js',
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},
{
test: /\.scss$/,
use: [
{loader: 'style-loader'},
{loader: 'css-loader'},
{loader: 'sass-loader'},
]
}
],
},
plugins: [
new VueLoaderPlugin()
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.bundle.js',
},
};
Webpack的設定以後有機會在寫
再來建立 src
資料夾,裡面放上面設定檔設定的 entry
js檔案,還有一個 App.vue
app.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App),
}).$mount('#app')
App.vue
<template>
<div>App work!</div>
</template>
<script>
export default {
name: 'App'
}
</script>
最後建立一個首頁
...
<body>
<div id="app"></div>
<script src="./dist/app.bundle.js"></script>
</body>
...
再來開啟你的 Server 連上去就完成啦!
最後更新時間: 2021年06月30日.