VUE + ElementUI 从搭建到运行

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

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

//官网下载地址
https://nodejs.org/en/download/

二.安装镜像

//可以使用淘宝镜像

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项目

1.vue init webpack-simple demo1 //创建一个简单的项目
2.npm install //引入项目依赖
3.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

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