VUE + ElementUI 从搭建到运行

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

前言:本文简洁的描述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 

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