vue3.0 Composition API 上手初體驗 構建基本項目開發環境
目前，vue3.0 已經進入了 beta 版本了。衆多的特性已經定下來了，相信有不少朋友都已經開始閱讀相關的資料或源碼了。
雖然我現在工作比較勞累，但是對於這樣的前端行業的盛事，我也不能袖手旁觀哪！所以，我決定寫一個系列的文章，來帶大家上手一下全新的 vue3.0。
首先，從目前公開信息來看，vue3.0 是完全兼容 2.0 版本的所有寫法的。因此，即便不瞭解 3.0 的內容，用原有的知識儲備，也是完全可以使用 3.0 版本的。這一點，各位同行不要驚慌。
另外，由於目前 vue3.0 對應的腳手架還沒有開放，因此，我們只能手動搭建我們的項目了。那麼本文，就來簡單說說如何從 0 到 1 構建一個基於 vue3.0 的項目環境。
其實，再過幾個月，就完全不必參考此文了，因爲到時候官方腳手架會把一切都安排的妥妥的。不過，這也並不表示此文完全沒有價值，因爲，如果你只會用腳手架，不會自己構建腳手架，也是一件蠻遺憾的事情，對吧？
請確保你對 vue2.0 是有一定了解的，對於命令行的操作是有基礎的，對於 node\npm 等是瞭然的，再閱讀本文。受限於個人時間有限，不能十分詳盡的展開介紹，因此，只能簡要的大概說明。
如果確實沒有基礎，可以看我2017年寫得一個系列的文章。 Vue2 項目實戰 此鏈接中有全部內容鏈接，可以去這裏看。
所有命令均在 MacOS 系統下，npm 源設置爲淘寶源。本人不回答任何有關 windows 系統的問題，理由很簡單——不會。
搭建基礎 webpack 環境
首先在系統中找個目錄，用來構建本項目。本人目錄爲 ~/Sites/myWork/demo/vue3-demo。下文命令均在此目錄下執行。
# 創建項目文件夾
mkdir -p ~/Sites/myWork/demo/vue3-demo
# 進入項目文件夾
cd ~/Sites/myWork/demo/vue3-demo
# 構建 npm 環境，執行命令後會有一系列的問題和選項，一路回車即可。
npm init
# 安裝 vue3.0
# @next 是表示最新版，目前最新版是3.0，幾年之後肯能會是更高的版本
# 當前時間爲2020年5月
npm i vue@next
# 安裝 webpack 依賴
# -D 表示是開發環境依賴，不加表示是項目依賴
npm i webpack webpack-cli webpack-dev-server -D
# 安裝打包編譯依賴
npm i html-webpack-plugin clean-webpack-plugin -D
# 安裝 vue 文件編譯依賴
npm i vue-loader@next @vue/compiler-sfc -D
# 安裝 css 編譯依賴
npm i css-loader style-loader -D
# 安裝 scss 依賴
npm i node-sass sass-loader -D
好，基本的這些包都有了。後面我們當然還會安裝其他的依賴，等下再說。
構建基礎文件
# 創建 webpack 配置文件
touch webpack.config.js
# 創建項目開發文件夾，以及靜態資源文件夾
mkdir src public
# 創建基礎文件
touch src/main.js public/index.html
打開編輯器，我們開始編寫這些文件吧。
webpack.config.js 文件內容
關於 webpack 的這個配置文件詳解，我就不解釋了，網上教程大把，我這邊也沒有做過多優化，只是能跑起來而已。懂得不用解釋，不懂的直接複製。
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = (env = {}) => ({
mode: env.prod ? 'production' : 'development',
devtool: env.prod ? 'source-map' : 'inline-source-map',
entry: path.resolve(__dirname, './src/main.js'),
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/'
},
resolve: {
alias: {
'vue': '@vue/runtime-dom',
'@': path.resolve(__dirname, './src')
}
},
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
}, {
test: /\.css$/,
use: ['style-loader', 'css-loader']
}, {
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
plugins: [
new VueLoaderPlugin(),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './public/index.html'),
filename: 'index.html'
})
],
devServer: {
publicPath: '/',
inline: true,
hot: true,
stats: 'minimal',
contentBase: __dirname,
overlay: true,
historyApiFallback: true
}
})
public/index.html 文件內容
一個基礎的 html 內容而已，包含一個 #app 的 div 作爲我們代碼的根節點。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>VUE 3.0 Demo</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
src/main.js 文件內容
這個內容是臨時的，只是看我們的 webpack 是否能正常跑起來。
document.querySelector('#app').innerText = 'Vue 3.0 demo'
package.json 兩處修改
第一個是將主文件引向我們剛剛寫的 webpack 配置文件。
另一個是添加 dev 節點，調用 webpack-dev-server
"main": "webpack.config.js",
"scripts": {
"dev": "webpack-dev-server"
},
跑起來！
在命令行輸入下面的命令：
npm run dev
如上圖所示，當命令跑起來之後，會顯示成這個樣子。
然後，我們在瀏覽器裏面輸入 http://localhost:8080 看項目是否跑起來了。
現在，我們可以看到，通過我們剛剛的配置，已經可以把項目跑起來了。
那麼，我們的基礎開發環境就弄好了。注意，我這邊只是爲了能把項目搞跑起來，至於其他的什麼優化是一毛錢都沒有的。目前我也不建議大家將 vue3.0 用於生產環境，搞這個，只是爲了學習而已。有關 webpack 更多內容，可以去找一找相關的資料文檔，我對這玩意兒也就是知其然不知其所以然的狀態。
本文由 FungLeo 原創，允許轉載，但轉載必須保留首發鏈接。
《vue3.0 Composition API 上手初體驗》 文章目錄地址： https://blog.csdn.net/fungleo/category_10020552.html 我會不定期的補充一些相關內容，歡迎關注訂閱！
文章代碼倉庫 https://github.com/fengcms/vue3-demo 會用 git 的朋友，可以去直接下載我的代碼。當然，給我點個 star 啥的，也不是不可以的哈！