vue3.0 Composition API 上手初体验 构建基本项目开发环境
Posted FungLeo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue3.0 Composition API 上手初体验 构建基本项目开发环境相关的知识，希望对你有一定的参考价值。
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 啥的，也不是不可以的哈！
以上是关于vue3.0 Composition API 上手初体验 构建基本项目开发环境的主要内容，如果未能解决你的问题，请参考以下文章
vue3.0 Composition API 上手初体验 神奇的 setup 函数 生命周期函数
vue3.0 Composition API 上手初体验 构建基本项目开发环境
vue3.0 Composition API 上手初体验 构建基本项目开发环境
vue3.0 Composition API 上手初体验 函数组件的开发与使用