美文网首页
vue实战开发007:vue引入Element-UI并配置路由

vue实战开发007:vue引入Element-UI并配置路由

作者: 编程手札 | 来源:发表于2019-05-01 18:42 被阅读0次

今天准备使用Element-UI来写个项目测试下学习的功能,要在vue中引用Element-UI组件,我们需要先来安装下Element-UI,这里我们用VScode工具编写,这里使用 npm 的方式安装,在终端执行命令:npm i element-ui -S

接着我们在vue中来引入Element-UI,在vue项目中的main.js中引入element-ui功能,我们只要在文件中添加如下内容即可:

import ElementUI from 'element-ui' //引入element-ui

import 'element-ui/lib/theme-chalk/index.css' //引入element样式

Vue.use(ElementUI); //实例化element

Vue项目默认的路由在在src目录下,通常我们在这里配置我们的router信息,考虑到后面的路由会比较多,这里我们建个router目录来专门管理路由,在这里建一个index.js文件来配置路由,再建一个router.js文件来存放路由信息,所以这里我们需要适当的修改下我们的路由配置信息,在main.js中引入:import router from '@router/index.js',index.js中写入router如下配置。

在routers.js文件中我们就可以统一的写入我们的路由文件了,引入模板然后将路由写入到routes中去, 用export来导出默认模块为routes,这样在index.js中就可以使用 import 引入该模块了。

现在我们启动我们的 vue项目,在终端输入命令: npm run serve,在浏览器中输入http://localhost:8080/就可以看到我们的HelloWorld页面了,这样我们的整体布局算是准备好了。

启动的时候报了两个错误,如下图所以,错误都会给出提示信息的,这里我的所错是代码不规范, 没按照他的规范来写,缺少了空格和换行,所以才报错了,但是这不影响代码执行,就看你对代码规范怎么处理了,如果你不在乎规范的话,创建项目的时候就不要开启代码检测功能。

这里我还想再整理下,创建个templates目录来存放每个页面,而在components中存放通用的模块,当我在页面中用到相同的模块时直接引用compontents的模块即可,这样页面和模块就可以很清晰的分开管理了,整个框架就比较清晰明了了。

相关文章

  • vue实战开发007:vue引入Element-UI并配置路由

    今天准备使用Element-UI来写个项目测试下学习的功能,要在vue中引用Element-UI组件,我们需要先来...

  • Vue-Router路由

    一、Vue路由配置 1、安装 2、引入vue-router并注册路由(以下步骤都在main.js里面) 3、配置路...

  • Vue中路由的基本使用方法

    基本使用步骤 下载并引入 vue-router.js 模块创建路由配置对象 const routes = [ { ...

  • vue使用cdn引入vue和element-ui

    #vue使用cdn引入vue和element-ui # element-ui 关于使用cdn引入方式报错 Refe...

  • 本期小结(一)

    vue★ Vue中引入jQuery vue使用element-ui vue的v-cloak使用 vue动态组件 v...

  • Vue移动项目

    Vue移动项目总结 一、vue-cli创建项目并配置vue路由https://www.jianshu.com/p/...

  • vue路由设置和传递参数

    vue 路由配置(多种路由类型的可分开书写路由 然后统一引入) import {routers, otherRou...

  • Vue2.0 使用路由

    src目录结构 定义组件 在main.js,引入并注册 vue-router 在main.js中导入组件 配置路由...

  • VUE路由的简单使用

    VUE中如何使用路由? 路由的基本使用 在html中 引入vue 和 vue-router 包 创建vue对象并将...

  • vue2.0 路由

    vue2.0 路由 首先先搭建一个vue-cli项目 搭建后的项目目录 下载路由模块依赖并引入 下载依赖下...

网友评论

      本文标题:vue实战开发007:vue引入Element-UI并配置路由

      本文链接:https://www.haomeiwen.com/subject/nswtwqtx.html