首页 >> js开发 >> jsvue3.0+vue-router+element-plus初实践js大全
jsvue3.0+vue-router+element-plus初实践js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
Vue3中文文档 Vue3中文文档 Vue3.0对比Vue2.x优势Vue3.0对比Vue2.x优势Vue3.0对比Vue2.x优势
框架内部做了大量的性能优化,包括:虚拟dom,编译模板,Proxy的新数据监听,更小的打包文件等。
新增的组合式API(即Composition API),更适合大型项目的编写方式。
对TypeScript支持更好,去掉this操作,更强大的类型推导。
框架内部做了大量的性能优化,包括:虚拟dom,编译模板,Proxy的新数据监听,更小的打包文件等。新增的组合式API(即Composition API),更适合大型项目的编写方式。对TypeScript支持更好,去掉this操作,更强大的类型推导。初始化项目初始化项目初始化项目安装@vue/cli
npm install @vue/cli -g
或 yarn global add @vue/cli
npm install @vue/cli -g
或 yarn global add @vue/cli创建项目
vue create 项目名
vue create 项目名可以选择Vue3的配置进行项目初始化
初始化完成后,安装vue-router,目前安装的版本是^4.0.0-rc.2
在 /src/router/index.js 中创建路由配置:^4.0.0-rc.2
import { createRouter, createWebHashHistory } from 'vue-router'
const Test = () => import(/* webpackChunkName: "Test" */ '@/views/test/index')
const constantRoutes = [
{
path: '/v3-demo',
component: Test
}
]
// https://www.npmjs.com/package/vue-router
const router = createRouter({
history: createWebHashHistory(),
routes: constantRoutes,
})
export default router
import { createRouter, createWebHashHistory } from 'vue-router'
const Test = () => import(/* webpackChunkName: "Test" */ '@/views/test/index')
const constantRoutes = [
{
path: '/v3-demo',
component: Test
}
]
// https://www.npmjs.com/package/vue-router
const router = createRouter({
history: createWebHashHistory(),
routes: constantRoutes,
})
export default router安装elment-plus(element-ui的3.x 版初体验), 目前版本是^1.0.1-alpha.14elment-plus^1.0.1-alpha.14main.js引入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount('#app')
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount('#app')5.package.json的依赖包版本
"dependencies": {
"core-js": "^3.7.0",
"element-plus": "^1.0.1-alpha.14",
"vue": "^3.0.0",
"vue-router": "^4.0.0-rc.2"
}
"dependencies": {
"core-js": "^3.7.0",
"element-plus": "^1.0.1-alpha.14",
"vue": "^3.0.0",
"vue-router": "^4.0.0-rc.2"
}效果
框架内部做了大量的性能优化,包括:虚拟dom,编译模板,Proxy的新数据监听,更小的打包文件等。
新增的组合式API(即Composition API),更适合大型项目的编写方式。
对TypeScript支持更好,去掉this操作,更强大的类型推导。
框架内部做了大量的性能优化,包括:虚拟dom,编译模板,Proxy的新数据监听,更小的打包文件等。新增的组合式API(即Composition API),更适合大型项目的编写方式。对TypeScript支持更好,去掉this操作,更强大的类型推导。初始化项目初始化项目初始化项目安装@vue/cli
npm install @vue/cli -g
或 yarn global add @vue/cli
npm install @vue/cli -g
或 yarn global add @vue/cli创建项目
vue create 项目名
vue create 项目名可以选择Vue3的配置进行项目初始化
初始化完成后,安装vue-router,目前安装的版本是^4.0.0-rc.2
在 /src/router/index.js 中创建路由配置:^4.0.0-rc.2
import { createRouter, createWebHashHistory } from 'vue-router'
const Test = () => import(/* webpackChunkName: "Test" */ '@/views/test/index')
const constantRoutes = [
{
path: '/v3-demo',
component: Test
}
]
// https://www.npmjs.com/package/vue-router
const router = createRouter({
history: createWebHashHistory(),
routes: constantRoutes,
})
export default router
import { createRouter, createWebHashHistory } from 'vue-router'
const Test = () => import(/* webpackChunkName: "Test" */ '@/views/test/index')
const constantRoutes = [
{
path: '/v3-demo',
component: Test
}
]
// https://www.npmjs.com/package/vue-router
const router = createRouter({
history: createWebHashHistory(),
routes: constantRoutes,
})
export default router安装elment-plus(element-ui的3.x 版初体验), 目前版本是^1.0.1-alpha.14elment-plus^1.0.1-alpha.14main.js引入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount('#app')
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount('#app')5.package.json的依赖包版本
"dependencies": {
"core-js": "^3.7.0",
"element-plus": "^1.0.1-alpha.14",
"vue": "^3.0.0",
"vue-router": "^4.0.0-rc.2"
}
"dependencies": {
"core-js": "^3.7.0",
"element-plus": "^1.0.1-alpha.14",
"vue": "^3.0.0",
"vue-router": "^4.0.0-rc.2"
}效果
相关文章:
- js代码JavaScript实现浏览器网页自动滚动并点击的示例代码
- jsVue+element-ui添加自定义右键菜单的方法示例js大全
- jsvuex Module将 store 分割成模块的操作js大全
- jsvue使用echarts图表自适应的几种解决方案js大全
- js代码JavaScript中的几种继承方法示例
- jselement中Steps步骤条和Tabs标签页关联的解决js大全
- js解决vue下载后台传过来的乱码流的问题js大全
- jsecharts浮动显示单位的实现方法示例js大全
- jsVue如何实现验证码输入交互js大全
- js简单谈谈offsetleft、offsetTop和offsetParentjs大全