vue 3.0 运行环境必须支持 ES2015+ 语法
vue 3.0 目前暂时不支持 IE11（后续应该会推出支持的版本）
vue 3.0 本示例的 vue 版本 3.0.0-alpha.8
先看一个 vue 3.0 结合了 vue-router 和 伪 vuex 的效果：
2 一个简单的 html 页面
记得 Evan You 好像在哪里说过，Vue 一定不会像某些框架一样，一定要依赖一个编译器，源码需要编译后才能运行在浏览器上。相反，Vue 一定会支持一个完整独立的 js，支持使用 CDN，可以直接在 html 中单独引入 js 使用。
所以，我们的第一个示例就是一个最简单的 html 页面。
复制代码4 一个工程化的集成 webpack 的简单示例
在实际大型项目中，我们一般都是工程化的思路在架构前端，所以很少简单的写一个 html 页面，引入 vue 脚本，而是需要依赖编译器，一般是 webpack。
示例参考地址：github.com/vuejs/vue-n…
抱歉：由于无法上传源码，只能完整的贴出来，感兴趣自己创建工程。
目录结构：
.
├── 1 index.html
├── 2 webpack.config.js
├── src
│ ├── 3 App.vue
│ └── 4 main.js
└── 5 package.json
复制代码1、index.html
module.exports = (env = {}) => ({
mode: env.prod ? ‘production’ : ‘development’,
devtool: env.prod ? ‘source-map’ : ‘cheap-module-eval-source-map’,
entry: path.resolve(__dirname, ‘./src/main.js’),
output: {
path: path.resolve(__dirname, ‘./dist’),
publicPath: ‘/’
},
resolve: {
alias: {
// this isn’t technically needed, since the default vue entry for bundlers
// is a simple export * from '@vue/runtime-dom. However having this
// extra re-export somehow causes webpack to always invalidate the module
// on the first HMR update and causes the page to reload.
‘vue’: ‘@vue/runtime-dom’
}
},
module: {
rules: [
{
test: /.vueKaTeX parse error: Expected 'EOF', got '}' at position 50: …r' }̲, {…/,
use: {
loader: ‘url-loader’,
options: { limit: 8192 }
}
},
{
test: /.css$/,
use: [
‘style-loader’,
‘css-loader’
]
}
]
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: ‘./index.html’,
filename: ‘index.html’
})
],
devServer: {
inline: true,
hot: true,
stats: ‘minimal’,
contentBase: __dirname,
overlay: true,
publicPath: ‘/’,
historyApiFallback: true
}
})
复制代码3、src/App.vue
Hello Vue 3!
<button @click=“inc”>Clicked {{ count }} times.
复制代码4、src/main.js
import { createApp } from ‘vue’
import App from ‘./App.vue’
createApp(App).mount(’#app’)
复制代码5、package.json
{
“private”: true,
“scripts”: {
“dev”: “webpack-dev-server”,
“build”: “webpack --env.prod”
},
“dependencies”: {
“vue”: “^3.0.0-alpha.8”
},
“devDependencies”: {
“@vue/compiler-sfc”: “^3.0.0-alpha.8”,
“css-loader”: “^3.4.0”,
“file-loader”: “^5.0.2”,
“html-webpack-plugin”: “^3.2.0”,
“style-loader”: “^1.1.3”,
“url-loader”: “^3.0.0”,
“vue-loader”: “^16.0.0-alpha.1”,
“webpack”: “^4.41.4”,
“webpack-cli”: “^3.3.10”,
“webpack-dev-server”: “^3.10.1”
}
}
复制代码所有文件准备就绪后，执行以下命令即可：
npm i & npm run dev
复制代码5 尝试引入 vue2.x 中的 vue-router 和 vuex 的示例
经过一翻折腾，将 vue-router 成功引入到项目中，但是 vuex 由于目前官网还没有适配 vue 3.0，所以只能换一种新的思路了。
以下是目前发现的问题清单（vue3 生态还有待完善）：
vue-router 适配 vue3.0，查看 这个ISSUE
vue-router 暂时不支持异步加载组件 lazy-loaded，查看 这个ISSUE
vuex 暂时未适配 vue3.0，查看 这个ISSUE
换一种思路在 vue3.0 上实现 vuex 效果，查看 这篇文章
目录结构：
.
├── 1 index.html
├── 2 webpack.config.js
├── src
│ ├── 3 App.vue
│ ├── 4 main.js
│ ├── router
│ │ └── 5 index.js
│ ├── store
│ │ └── 6 index.js
│ └── views
│ ├── 7 Page1.vue
│ └── 8 Page2.vue
└── 9 package.json
复制代码相比上一个示例，本示例增加了3个目录 router、store 和 views，同时修改了 main.js 和 App.vue。
1、index.html
module.exports = (env = {}) => ({
mode: env.prod ? ‘production’ : ‘development’,
devtool: env.prod ? ‘source-map’ : ‘cheap-module-eval-source-map’,
entry: path.resolve(__dirname, ‘./src/main.js’),
output: {
path: path.resolve(__dirname, ‘./dist’),
publicPath: ‘/’
},
resolve: {
alias: {
// this isn’t technically needed, since the default vue entry for bundlers
// is a simple export * from '@vue/runtime-dom. However having this
// extra re-export somehow causes webpack to always invalidate the module
// on the first HMR update and causes the page to reload.
‘vue’: ‘@vue/runtime-dom’
}
},
module: {
rules: [
{
test: /.vueKaTeX parse error: Expected 'EOF', got '}' at position 50: …r' }̲, {…/,
use: {
loader: ‘url-loader’,
options: { limit: 8192 }
}
},
{
test: /.css$/,
use: [
‘style-loader’,
‘css-loader’
]
}
]
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: ‘./index.html’,
filename: ‘index.html’
})
],
devServer: {
inline: true,
hot: true,
stats: ‘minimal’,
contentBase: __dirname,
overlay: true,
publicPath: ‘/’,
historyApiFallback: true
}
})
复制代码3、src/App.vue
{{ message }}
count：{{count}}
<router-link to="/">Home</router-link>
<router-link to="/page1">Page1</router-link>
<router-link to="/page2">Page2</router-link>
<router-view></router-view>
复制代码4、src/main.js
import { createApp } from ‘vue’
import App from ‘./App.vue’
import router from ‘./router’
createApp(App)
.use(router)
.mount(’#app’)
复制代码5、src/router/index.js
import { createRouter, createHistory } from ‘@posva/vue-router-next’
import Page1 from ‘…/views/Page1.vue’
import Page2 from ‘…/views/Page2.vue’
const routes = [
{
path: ‘/page1’,
name: ‘page1’,
component: Page1
},
{
path: ‘/page2’,
name: ‘page2’,
// lazy-loaded doesn’t seem to be implemented yet
// https://github.com/vuejs/vue-next/issues/777
component: Page2
}
]
export const routerHistory = createHistory()
export const router = createRouter({
history: routerHistory,
base: process.env.BASE_URL,
routes
})
router.beforeEach((to, from, next) => {
console.log(‘beforeEach’, to.name);
next()
})
export default router
复制代码6、src/store/index.js
import {reactive, readonly } from ‘vue’;
let store = reactive({
message: ‘Hello Vue3!’,
count: 1
});
export default {
getState() {
return readonly(store);
},
updateCnt() {
console.log(‘updateCnt’, store.count);
store.count++;
}
}
复制代码7、src/views/Page1.vue
Page1
复制代码8、src/views/Page2.vue
Page2
复制代码9、package.json
{
“private”: true,
“scripts”: {
“dev”: “webpack-dev-server”,
“build”: “webpack --env.prod”
},
“dependencies”: {
“@posva/vue-router-next”: “^4.0.0-alpha.0”,
“vue”: “^3.0.0-alpha.8”
},
“devDependencies”: {
“@vue/compiler-sfc”: “^3.0.0-alpha.8”,
“css-loader”: “^3.4.0”,
“file-loader”: “^5.0.2”,
“html-webpack-plugin”: “^3.2.0”,
“style-loader”: “^1.1.3”,
“url-loader”: “^3.0.0”,
“vue-loader”: “^16.0.0-alpha.1”,
“webpack”: “^4.41.4”,
“webpack-cli”: “^3.3.10”,
“webpack-dev-server”: “^3.10.1”
}
}
