create Vue.js app use Single-file Components, without CLI
這是一篇翻譯 + 總結。
粗略講述瞭如何不通過 vue-cli 創建 vue 項目。
原文： How to create a Vue.js app using Single-File Components, without the CLI..
1. 創建項目結構：
創建 hello-world文件夾，命令行輸入 npm init, 一路回車。
src文件夾：存放HTML，JS，.vue文件。
webpack.config.js文件：Webpack配置文件。
使用NPM：自動生成 package.json文件 + node_modules文件夾
2. 相關依賴：
vue：JS框架。
vue-loader & vue-template-compiler：將我們 .vue 文件轉換成 JS。
webpack：工具，可以進行代碼轉換、打包。
webpack-cli：用來運行 webpack 命令。
webpack-dev-server：開發時的服務器。
babel-loader：將 ES6 轉換成 ES5，它需要下面兩個依賴。
@babel/core & @babel/preset-env：單獨的 Babel 不會對你的代碼做任何事情，這兩個插件允許將我們的 ES6代碼 轉換成 ES5。
css-loader：提取 .vue 文件裏的CSS，或者我們 import 到 JS文件 裏的CSS，並解析路徑。換句話說，找出CSS位置。我們需要接下來的 loader 來對CSS進行實際的處理。
vue-style-loader：獲得從 css-loader 提取的CSS，注入到 HTML文件 中。這將在 HTML文檔 頭部創建並注入一個樣式標籤。
html-webpack-plugin：獲得 index.html文件，在頭部注入打包好的 JS文件，並將此文件拷貝到 dist文件夾。
rimraf：允許我們通過命令行刪除文件。當多次 build 項目時，可以使用它刪除 舊的build文件。
npm install vue vue-loader vue-template-compiler webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env css-loader vue-style-loader html-webpack-plugin rimraf -D
3. 創建文件(src文件夾)
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue hello world</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
main.js:
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#app',
render: h => h(App)
});
App.vue:
<template>
<div id="app">
<input type="text" v-model="message">
<h2>{{message}}</h2>
<h3>h3</h3>
<button @click="clickFn">btn</button>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
message: 'hello world'
}
},
methods: {
clickFn () {
this.a = `message: ${this.message}`;
console.info(this.a);
}
}
}
</script>
<style scoped>
#app {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
</style>
4. 配置Webpack
在根目錄下創建 webpack.config.js文件：
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: "[name].bundle.js"
},
module: {
rules: [{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{ test: /\.vue$/, loader: 'vue-loader' },
{ test: /\.css$/, use: ['vue-style-loader', 'css-loader'] }],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new VueLoaderPlugin(),
]
};
接下來逐行解釋：
1 ~ 2：引入兩個插件。
3：引入 node 的 path 模塊。
5：將配置導出( export )爲對象，在運行 webpack 命令時可以對其訪問。
6：入口。Webpack 需要一個起點，這裏是 ./src/main.js，它會從 main.js 文件開始查找並梳理我們的代碼。
7 ~ 10：出口。path：路徑，filename：生成的打包文件的名稱。
11 ~ 12：module 對象，其中有一個規則數組( module.rules )，每個規則告訴 webpack 如何處理某些文件
13 ~ 21(rule)：指示 webpack 使用 babel-loader 處理 src文件夾 裏的 .js文件。(Babel 會將 ES6 轉換成 ES5)
22(rule)：指示 webpack 使用 vue-loader 將 .vue文件 轉換成 JS。(不要忘了29行的關聯插件)。
23(rule)：多個 loader 時，webpack 從右向左執行相關 loader。這裏的兩個 loader 告訴 webpack 從 Vue文件 或者任何 JS文件 中獲取CSS(css-loader)，然後將其作爲樣式標籤注入到HTML 中(vue-style-loader)。
25：plugins 數組，這裏我們添加了兩個插件。
26 ~ 28(plugin)：HtmlWebpackPlugin插件 獲取 index.html 文件位置，將打包好的 JS文件 通過 script標籤 添加進去。在我們 build 我們的項目時，這個插件還會複製 HTML文件 到我們的分發文件夾中。
29(plugin)：VueLoaderPlugin插件，與 vue-loader 一起解析我們的 .vue文件。
5. 設置 package.json 文件
配置完成後，查看我們的項目。我們期望每次修改項目時瀏覽器自動更新，就需要用到 webpack-dev-server。
"scripts": {
"serve": "webpack-dev-server --mode development"
},
–mode development：非必須，告訴 webpack 當前是 開發者模式。當我們 build 項目時，可以換成 --mode production。
npm run serve
可以看到：
打開瀏覽器查看。此時如果修改 message 內容，瀏覽器會自動更新。h2 內容會隨着 input 輸入內容一起變化。但是如果此時修改 h3 裏的內容，就會發現 h2 重新變回 “hello world”。這是因爲瀏覽器進行了刷新，script標籤 和 頁面重新加載。也就是說，我們無法維持應用程序的狀態。爲了解決此問題，Webpack 提供了 熱替換模塊(Hot Module Replacement，也稱 HMR)。
webpack.config.js文件中增加：
devServer: {
open: true,
hot: true
}
open：告訴 dev-server 在 server 啓動後打開瀏覽器，即：執行 npm run server 後自動打開瀏覽器。
hot：啓用 webpack 的 HMR 功能。
6. build 項目：
當我們執行 npm run serve 時，發現並沒有文件創建。這是因爲 webpack 只是在緩存中創建了這些文件。如果我們想要發佈我們的項目，就需要 build。
使用 webpack 替換 webpack-dev-derver，使用 –mode production。刪除之前的 build 文件：rimraf dist
"scripts": {
"clean": "rimraf dist",
"build": "npm run clean && webpack --mode production",
"serve": "webpack-dev-server --mode development"
}
npm run build：會先執行 npm run clean，然後執行 webpack。創建一個dist文件夾，裏面有我們的代碼：
