版权声明:本文为博主原创文章,欢迎转载,转载请注明作者、原文超链接

前言:本文简洁的描述VUE + ElementUI 从搭建到运行,可以根据本文先搭建出可运行的项目,然后再详细回顾每个步骤所做的事;也可在第二次搭建的时候作为步骤回顾与参考。

一.在node.js官网下载node.js并安装

//官网下载地址

https://nodejs.org/en/download/

二.安装镜像

//如果公司有搭建私服,使用公司私服镜像

npm set registry http://127.0.0.1:4873
//可以使用淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org 

三.安装webpack

npm install webpack -g

四.安装vue脚手架

npm install vue-cli -g

五.安装 vue 路由模块vue-router

npm install vue-router --save

六.创建一个简单的vue项目

.vue init webpack-simple demo1 //创建一个简单的项目

.npm install //引入项目依赖

.npm run dev //运行

七.语法学习

vue语法与js很相似,会js的一看就懂了,这里就不做多介绍,可查看vue官网:https://cn.vuejs.org/v2/guide/syntax.html

八.组件创建和使用

1.父调用子组件的方法

//父组件调子组件的方法

//App.vue(父)

<page1 ref="page1" @join="res"></page1>

<button @click="send">调用组件内的方法:w1</button>

send: function () {

    this.$refs.page1.come('w1')

}
//page1.vue (子)

come:function(data){

    alert('page1:' + data)

}

2.父组件接收子组件的返回值

//子组件返回值处理

//App.vue (父)

<page1 ref="page1" @join="res"></page1>

res: function (data) {

    alert("收到了Welcome组件的返回值:" + data)

}
//page1.vue(子)

join: function (data) {

    this.$emit('join','welcome')

}

九.VueRouter路由配置

1.引入VueRouter组件

在之前我们已经安装了vue-router,这里只需要引入即可

import VueRouter from 'vue-router'

Vue.use(VueRouter);

2.创建路由组件

先创建两个vue组件作为路由页面

//page2.vue;    page3.vue类似

<template>

  <div>

    <el-card>我的第二个页面</el-card>

  </div>

</template>

<script>

  export default {

    components: {},

    name: 'page2',

    data: function () {

      return {}

    },

    methods: {}

  }

</script>

<style>

</style>

3.定义路由

//先引入主键,才可以配置路由

import Page2 from '../src/pages/page2.vue'

import Page3 from '../src/pages/page3.vue'

const routes = [

{

    path: '/', component: App,

    children: [

    {path: '/page2', component: Page2},

    {path: '/page3', component: Page3}]

}];

4.创建router实例

const router = new VueRouter({

    routes: routes

});

5.创建和挂载跟实例

const app = new Vue({

    el: '#app',

    router: router

}).$mount('#app');

6.实例路由配置完成后需要在index.html添加路由入口

<div id="app">
<router-view></router-view>
</div>

7.路由跳转

<router-link to="/page2">第二个页面</router-link>

<router-link to="/page3">第三个页面</router-link>

十.element-iu 的安装和使用

1.使用npm安装element-ui

npm i element-ui -S

2.在main.js中导入使用vue

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

import ElementUI from 'element-ui'

Vue.use(ElementUI)

3.因为在elment-ui中css中运用了饿了么的字体库,导致缺少解析器,运行会报错,需要修改webpack.config.js文件,添加'ttf|woff'格式

{

  test: /\.(png|jpg|gif|svg|ttf|woff)$/,

  loader: 'file-loader',

  options: {

    name: '[name].[ext]?[hash]'
}
}

4.elementUI 2.0版本以上使用了jsx的语法,这就是会用到一个 Babel plugin 插件,用于在 Vue 中使用 JSX 语法的原因,它可以让我们回到于更接近模板的语法上

1)安装

npm install\
babel-plugin-syntax-jsx\
babel-plugin-transform-vue-jsx\
babel-helper-vue-jsx-merge-props\
babel-preset-es2015\
--save-dev

2).编辑.babelrc文件

{
"presets": ["es2015"],
"plugins": ["transform-vue-jsx"]
}

5.使用elementUI

使用起来很简单,直接使用组件即可

<el-input v-model="input" placeholder="请输入内容"></el-input>

更多组件使用请参考官网: http://element-cn.eleme.io/#/zh-CN/component/installation

十一.安装Yarn

Yarn是Facebook最近发布的一款依赖包安装工具。Yarn是一个新的快速安全可信赖的可以替代NPM的依赖管理工具。

//可以安装yarn

npm install -g yarn 
感谢您的阅读,如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮。本文欢迎各位转载,但是转载文章之后必须在文章页面中给出作者和原文连接

VUE + ElementUI 从搭建到运行的更多相关文章

  1. Vue/Element-ui 安装搭建开发环境(一)

    Element 是饿了么全段开发团队推出的一套基于 vue.js2.0 的 PC Web 端开发框架. Element 中文文档:https://element.eleme.cn/#/zh-CN 1. ...

  2. 零基础 Vue 开发环境搭建 打开运行Vue项目

    [相关推荐]IntellIJ IDEA 配置 Vue 支持 打开Vue项目 所需文件 node.js环境(npm包管理器)(node-v8.11.3-x64.msi)(npmV5.6.0) cnpm ...

  3. 从无到有实现搭建vue+ElementUI+less+ES6的开发环境并进行简单的开发的项目

    项目简介:该项目是基于日常计算宿舍水电煤气费的需求写的,旨在从无到有实现搭建vue+ElementUI+less+ES6的开发环境并进行简单的开发,使用webpack进行代码的编译.压缩和打包,并疏通 ...

  4. Vue + Element-ui实现后台管理系统(2)---项目搭建 + ⾸⻚布局实现

    项目搭建 + ⾸⻚布局实现 上篇对该项目做了个总述 :Vue + Element-ui实现后台管理系统(1) --- 总述 这篇主要讲解 项目搭建 + 后台⾸⻚布局实现 : 整体效果 后台首页按布局一 ...

  5. SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(一): 搭建基本环境、整合 Swagger、MyBatisPlus、JSR303 以及国际化操作

    相关 (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y- ...

  6. 保姆级别的vue + ElementUI 搭建后台管理系统教程

    vue + ElementUI 搭建后台管理系统记录 本文档记录了该系统从零配置的完整过程 项目源码请访问:https://gitee.com/szxio/vue2Admin,如果感觉对你有帮助,请点 ...

  7. VUE环境项目搭建以及简单的运行例子

    1.打开cmd命令窗口,node-v和npm-v可以查看相应的安装版本信息. 2.使用一下命令全局安装vue-cli. 1)npm install  -g  vue-cli 2)如果使用淘宝镜像,则是 ...

  8. vue+element-ui JYAdmin后台管理系统模板-集成方案【项目搭建篇2】

    项目搭建时间:2020-06-29 本章节:讲述基于vue/cli, 项目的基础搭建. 本主题讲述了: 1.跨域配置 2.axios请求封装 3.eslint配置 4.环境dev,test,pro(开 ...

  9. Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记

    前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...

随机推荐

  1. MySQL—查询某时间范围的数据

    -- 查询今天的数据 select * from `user` where to_days(birthday) = to_days(CURDATE()); -- 查询昨天的数据 select * fr ...

  2. Squid.conf配置详情

    squid常用命令:/usr/local/squid/sbin/squid -z 初始化缓存空间/usr/local/squid/sbin/squid 启动/usr/local/squid/sbin/ ...

  3. var

    在函数中,使用var声明的变量,为局部变量,只能在函数内部访问. 不使用var声明的变量,为全局变量,在函数外边也能访问. 没有var的情况 <script type="text/ja ...

  4. mui.init方法配置

    mui框架将很多功能配置都集中在mui.init方法中,要使用某项功能,只需要在mui.init方法中完成对应参数配置即可,目前支持在mui.init方法中配置的功能包括: 创建子页面. 关闭页面. ...

  5. springboot 初始化 web 项目 启动报错。。。一直解决不了

    1. 一个简单的SpringBoot项目,启动时报错信息: ERROR 18688 --- [cat-startStop-1] org.apache.catalina.core.ContainerBa ...

  6. docker学习笔记-安装

    安装docker Ubuntu Docker 安装 Docker 支持以下的 Ubuntu 版本: Ubuntu Precise 12.04 (LTS) Ubuntu Trusty 14.04 (LT ...

  7. 【转】B树、B+树、B*树

    出处:http://blog.csdn.net/v_JULY_v 1.前言: 动态查找树主要有:二叉查找树(Binary Search Tree),平衡二叉查找树(Balanced Binary Se ...

  8. yum-内网yum源服务器配置(CentOS6.5)

    一.安装apache服务1.安装httpd服务 yum -y install httpd (纯内网用rpm包安装也可以) 2.启动httpd服务 service httpd start 二.挂载完整的 ...

  9. samba服务配置(一)

    samba是一个实现不同操作系统之间文件共享和打印机共享的一种SMB协议的免费软件. samba软件结构: /etc/samba/smb.conf    #samba服务的主要配置文件 /etc/sa ...

  10. LeNet,AlexNet,GoogleLeNet,VggNet等网络对比

    CNN的发展史 上一篇回顾讲的是2006年Hinton他们的Science Paper,当时提到,2006年虽然Deep Learning的概念被提出来了,但是学术界的大家还是表示不服.当时有流传的段 ...