Vue3 尝试小记
1.安装vue
使用 npm 或 yarn 安装 Vue 3：
# npm
npm install vue@next
# yarn
yarn add vue@next
2.创建项目文件夹
在命令行中，输入以下命令，在根目录下创建一个项目文件夹：
mkdir my-vue3-project
3.初始化 package.json
使用 npm init 命令，在该目录中创建 package.json 文件：
npm init -y
4.安装路由router
安装 vue-router：
npm install vue-router@next
5.安装Babel
安装 babel7 依赖项：
npm install @babel/core @babel/preset-env --save-dev
6.安装Webpack
安装 webpack 4 和 webpack 插件：
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
7.编写代码
使用以下命令，在根目录下创建 src 目录：
mkdir src
在 src 目录下创建 main.js：
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#app',
render: h => h(App)
});
在 src 目录下创建 App.vue：
<template>
<div>Hello, Vue 3!</div>
</template>
<script>
export default {};
</script>
在根目录下创建 index.html：
<!DOCTYPE html>
<html>
<head>
<title>Vue3 Project</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
8.配置Babel
在根目录下创建 .babelrc 文件，并将以下代码添加到其中：
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry"
}
]
]
}
9.配置Webpack
在根目录下创建 webpack.config.js 文件，并将以下代码添加到其中：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
})
]
};
10.配置package.json
将以下代码添加到 package.json 文件中，以配置启动和构建命令：
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack --mode production"
}
11.运行
运行 start 命令：
npm run start
浏览器会自动打开 http://localhost:8080/ 并显示 Hello, Vue 3!
