VUE + ElementUI 从搭建到运行

2022-09-29 14:41:12

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

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

码农公寓