创建项目目录
mkdir vue-next-sample
初始化package.json文件
npm init --yes
安装Vue3.0模块
npm i vue@next
安装Webpack相关模块
npm i webpack webpack-cli webpack-dev-server --save-dev
安装一些需要用到的Webpack插件
npm i html-webpack-plugin mini-css-extract-plugin --save-dev
安装Vue.js单文件组件的loader
npm i vue-loader@next @vue/compiler-sfc --save-dev
安装 css-loade
npm i css-loader --save-dev
建立项目文件结构
src 源文件目录
public html文件目录
在src目录建立Vue组件
App.vue
内代码
与Vue2.0的区别，可以定义多个div，Vue2.0只能挂载一个div
<template>
<div>Hello {{ title }}</div>
<div>{{ count }}</div>
<div><button value="+" @click="increment">+</button></div>
</template>
<script>
//导入自定义组件和ref包裹器
import { defineComponent,ref } from 'vue'
export default defineComponent({
setup () {
const count=ref(1)
const increment=()=>count.value++
return {
title:'vue.3.011111',
count,
increment
}
}
})
</script>
<style>
div {
color:blue;
}
</style>
建立入口主文件
main.js
import { createApp } from 'vue'
import App from './App.vue'
//创建应用对象
const app=createApp(App)
//挂载到html的节点，ID为root的div节点
app.mount('#root')
建立webpack打包配置文件
webpack.config.js
// module.exports={
// }
const path=require('path')
const webpack=require('webpack')
const HtmlWebpackPlugin=require('html-webpack-plugin')
const MiniCssExtractPlugin=require('mini-css-extract-plugin')
const { VueLoaderPlugin } = require('vue-loader')
//引入，未来写代码有智能提示，采用的es6规范的写法
// import webpack from 'webpack'
/**
*@type {webpack.Configuration}
*/
const config={
entry:'./src/main.js',
output:{
filename:'bundle.js',
path:path.join(__dirname,'dist')
},
module:{
rules:[
{
test:/.vue$/,
use:'vue-loader'
},
{
test:/.css$/,
use:[MiniCssExtractPlugin.loader,'css-loader']
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./public/index.html'
}),
new MiniCssExtractPlugin(),
new VueLoaderPlugin(),
new webpack.HotModuleReplacementPlugin() //热更新插件
]
}
module.exports=config
public文件夹建立index.html用于挂载组件的html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="root"></div> </body> </html>
webpack打包
npx webpack
webpack热更新
npx webpack-dev-server --hot
Vue3.0的优势
没有this
更好的类型推导能力
更待的代码压缩空间
更友好的Tree Shaking支持
更灵活的逻辑复用能力