VUE 3.0 学习探索入门系列 - 用几个 demo 认识 vue3(3)
2020/3/13 11:02:46
本文主要是介绍VUE 3.0 学习探索入门系列 - 用几个 demo 认识 vue3(3),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1 说明
- 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
页面。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue3.0 Demo</title> <meta content="一个最简单的示例" name="description"> <script src="https://unpkg.com/vue@3.0.0-alpha.8/dist/vue.global.js"></script> </head> <body> <div id="app"> {{ message }} </div> <script> const { createApp, ref } = Vue; const App = { setup() { const message = ref('Hello Vue!'); return { message } } }; createApp(App).mount('#app'); </script> </body> </html> 复制代码
3 稍微带一些交互逻辑的示例
示例参考地址:vue-composition-api-rfc.netlify.com/#basic-exam…
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue3.0 Demo</title> <meta content="稍微带一些交互的示例" name="description"> <script src="https://unpkg.com/vue@3.0.0-alpha.8/dist/vue.global.js"></script> </head> <body> <div id="app"> <button @click="increment"> Count is: {{ state.count }}, double is: {{ state.double }} </button> </div> <script> const { createApp, reactive, computed } = Vue; const App = { setup() { const state = reactive({ count: 0, double: computed(() => state.count * 2) }); function increment() { state.count++ }; return { state, increment }; } }; createApp(App).mount('#app'); </script> </body> </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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Vue3.0 Demo</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html> 复制代码
2、webpack.config.js
const path = require('path') const { VueLoaderPlugin } = require('vue-loader') const HtmlWebpackPlugin = require('html-webpack-plugin') 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: /\.vue$/, use: 'vue-loader' }, { test: /\.png$/, 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
<template> <h1>Hello Vue 3!</h1> <button @click="inc">Clicked {{ count }} times.</button> </template> <script> import { ref } from 'vue' export default { setup() { const count = ref(0) const inc = () => { count.value++ } return { count, inc } } } </script> <style scoped> h1 { font-family: Arial, Helvetica, sans-serif; } </style> 复制代码
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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Vue3.0 Demo</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html> 复制代码
2、webpack.config.js
const path = require('path') const { VueLoaderPlugin } = require('vue-loader') const HtmlWebpackPlugin = require('html-webpack-plugin') 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: /\.vue$/, use: 'vue-loader' }, { test: /\.png$/, 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
<template> <h1>{{ message }}</h1> <p>count:{{count}}</p> <router-link to="/">Home</router-link> <router-link to="/page1">Page1</router-link> <router-link to="/page2">Page2</router-link> <router-view></router-view> </template> <script> import { toRefs } from 'vue' import store from './store'; export default { setup() { let data = store.getState(); // WARNING:这里无法直接修改属性 readonly data.count++; return { ...toRefs(data) } } } </script> <style scoped> h1 { font-family: Arial, Helvetica, sans-serif; } a + a { margin-left: 10px; } </style> 复制代码
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
<template> <h2>Page1</h2> </template> <script> import store from '../store'; export default { name: 'page2', setup() { // 更新 visit 全局变量 store.updateCnt(); } } </script> <style scoped> </style> 复制代码
8、src/views/Page2.vue
<template> <h2>Page2</h2> </template> <script> import store from '../store'; export default { name: 'page1', setup() { // 更新 visit 全局变量 store.updateCnt(); } } </script> <style scoped> </style> 复制代码
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" } } 复制代码
所有文件准备就绪后,执行以下命令即可:
npm i & npm run dev 复制代码
最终效果:
到此为止,相信大家搭建 vue 3.0 的工程应该就没啥大问题了。后续我们就结合这现有的工程,详细说明 vue3 的一些新特性,欢迎大家关注和点赞。
(本文完)
这篇关于VUE 3.0 学习探索入门系列 - 用几个 demo 认识 vue3(3)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南