Vue+element.js使用心得

一：前期准备工作

1：node.js

我们知道javascript代码只能在浏览器上运行，只有浏览器能够解析js代码，如果想要javascript代码能够在服务器端运行就必须提供一个Javascript的运行环境(runtime environment)，这就是node.js。

2：npm：类似于java的maven

注：npm已经内置于node.js，所以安装了node.js也代表安装了npm,可通过命令行：npm -v;node -v查看各自的版本

 

3：webpack ：前端项目的构建工具

打包命令：webpack <源文件> -o <目标文件>

注：不仅仅是构建工具，还有以下功能

  • 热加载：修改了代码然后保存，浏览器会自动刷新
  • 压缩文件：压缩图片，字体, 脚本文件等
  • 插件(plugin)：webpack打包时可以执行某个插件，控制webpack打包时的某个过程，这种插件机制和maven中的插件原理完全一样

4：vue.js：

使用 数据驱动+组件化 来开。

数据双向绑定(当修改视图时数据也会赋值给model，当更改model的时候也会反应到视图上)。

它是一个轻量级的MVVM框架 

二：创建-》打包项目

1.安装vue-cli3.0脚手架(用于初始化项目)

npm install -g @vue/cli

2.创建项目

vue create <项目名字>

3. 安装cnpm(此步骤不是必须的)

有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所以还需要npm的国内镜像—cnpm

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

4. 安装依赖包

cd <project name>
cnpm install

5. 启动程序就可以在浏览器访问

npm run dev

6. 在浏览器访问localhost:8080

7.打包，默认是dist文件，生成了html,js,css文件

cnpm run build

8.前后端交互

springboot与Vue交互一般有两种方式

  • build前端vue项目，然后把生成的dist目录下的文件拷贝到resources下的static下即可
  • 分开部署，要解决跨域问题
     

三：集成Element

1：安装element

# 切换到项目根目录
$ cd <project root dir>
# 安装element-ui, 安装后package.json中dependencies就会增加element-ui依赖
$ cnpm i element-ui -S

2：在main.js中引入element-ui

import Vue from 'vue'

import App from './App'

import router from './router'

// 导入element-ui,引入css样式

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

// Vue使用ElementUI

Vue.use(ElementUI)

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  components: { App },

  template: '<App/>'

})

3：在App.vue文件 添加element组件

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <el-row>
      <el-button disabled>默认按钮</el-button>
      <el-button type="primary" disabled>主要按钮</el-button>
      <el-button type="success" disabled>成功按钮</el-button>
      <el-button type="info" disabled>信息按钮</el-button>
      <el-button type="warning" disabled>警告按钮</el-button>
      <el-button type="danger" disabled>危险按钮</el-button>
    </el-row>

    <el-row>
      <el-button plain disabled>朴素按钮</el-button>
      <el-button type="primary" plain disabled>主要按钮</el-button>
      <el-button type="success" plain disabled>成功按钮</el-button>
      <el-button type="info" plain disabled>信息按钮</el-button>
      <el-button type="warning" plain disabled>警告按钮</el-button>
      <el-button type="danger" plain disabled>危险按钮</el-button>
    </el-row>
    <router-view/>
  </div>
</template>