Vue+element.js使用心得

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组件（https://element.eleme.cn/#/zh-CN/component/installation）

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

四：参考文档

1：Vue.js + element-ui 扫盲

https://blog.csdn.net/vbirdbest/article/details/84871336

2：vue+Springboot 前后端数据交互

https://blog.csdn.net/QXqmz/article/details/104537557

https://blog.csdn.net/weixin_42603009/article/details/91477222

3：搭建vscode+vue环境

https://www.cnblogs.com/zyskr/p/10609288.html

vue cli3.0 项目安装 推荐使用

https://www.cnblogs.com/happyty/p/9699902.html