Vue-Cli对于Java开发工程师来说其实也容易上手

1.简介

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

• 通过 @vue/cli 搭建交互式的项目脚手架。
• 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
• 一个运行时依赖 (@vue/cli-service)，该依赖：可升级；基于 webpack 构建，并带有合理的默认配置；可以通过项目内的配置文件进行配置；可以通过插件进行扩展。
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

2.安装Vue-Cli

如果您已经安装了旧版本的vue-cli（1.x或2.x），您需要先通过npm卸载vue-cli -g或yarn global remove vue-cli卸载它。

npm install -g @vue/cli
# 或者使用
yarn global add @vue/cli
# 查看是否安装成功
vue --version

3.创建一个Vue-Cli项目

#命令创建
vue create 项目名
#客户端创建
vue ui
#创建成功后安装依赖
npm install -g @vue/cli-init

项目结构如下：

|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- utils.js                     // 构建工具相关
|   |-- vue-loader.conf.js           // webpack loader配置
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置,构建开发本地服务器
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 测试脚本的配置
|-- src                              // 源码目录
|   |-- components                   // vue所有组件
|   |-- router                       // vue的路由管理
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|-- test                             // 测试文件
|   |-- e2e                          // e2e 测试
|   |-- unit                         // 单元测试
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .eslintignore                    // eslint检测代码忽略的文件（夹）
|-- .eslintrc.js                     // 定义eslint的plugins,extends,rules
|-- .gitignore                       // git上传需要忽略的文件格式
|-- .postcsssrc                      // postcss配置文件
|-- README.md                        // 项目说明，markdown文档
|-- index.html                       // 访问的页面
|-- package.json                     // 项目基本信息,包依赖信息等

刚创建好的项目中，文件夹的作用：

4.运行创建好的项目

这里使用的是VS Code进行开发，没有下载的小伙伴可以点击下载 提取码: jixm

VS Code是有中文插件的，可以去百度搜一下怎么安装，这里就直接跳过中文安装的步骤了，安装后，打开VS Code—》左上角 文件—》打开文件夹 选择你刚创建的项目。

5.组件、页面以及路由作用

我们在views文件夹中的Home.vue页面来介绍

<template>
  <div class="home">
    <!-- 引用data中的info -->
    <h1>{{info}}</h1>
    <!-- 路由，相当于a标签，在to属性中设置跳转的页面 -->
    <router-link to="/about"><button>标签形式，跳转到about页面</button></router-link><br/>
    <!-- 引用go方法进行跳转 -->
    <button @click="go">js形式，跳转到about页面</button>
    <!-- 引入组件后，只需要把组件名变成标签使用即可，首字母大写往后有大写都用-小写来代替--> 
    <Hello-world/>
  </div>
</template>

<script>
// 引入组件，@代表绝对路径引用
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  //标识组件，多个组件使用逗号相隔
  components: {
    HelloWorld
  },
   //表示需要使用的数据，固定的
  data(){
    //这也是固定的
    return({
      //属性名，这个随便你自己取，:后面放值，多个值使用空格隔开
      //数据类型和Jquary中差不多一样，本人是java开发工程师，也是根据自己的		//理解来写的，写的不好请见谅
      info: '编程本就是逆天而行，死在路上很正常'
    })
  },
  //代表方法，固定的
  methods:{
    //方法名
    go(){
      this.$router.push("/about");
    }
  }
}
</script>

现在来看运行效果

现在来看components下的组件HelloWorld.vue中的代码

<template>
  //class名字可以随便取，尽量和你文件名接近就好了
  <div class="hello">
      //这个就是页面上展示的，组件必须放在div盒子中
      <span>我是HelloWorld组件</span>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

再来看看router文件夹，下面有个index.js没有的话自己新建

import Vue from 'vue'
import VueRouter from 'vue-router'

//下面就是引入页面组件，不引入页面就不能实现跳转
//import 名字自定义 from '页面组件路径'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

const routes = [
  {
	//跳转的路径，属性直接使用逗号相隔
    path: '/',
	//这个名字和你上面引入时一样就行
    name: 'Home',
	//标识组件
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
  //当你创建其他页面时也是一样的操作，通过逗号相隔，{path,name,component}
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

6.关于其他开源的组件

elment-ui: 点击跳转

Ant-Design-vue: 点击跳转

Axios(相当于jquery中的Ajax)：点击跳转

7.作者有话说

作为一个Java开发工程师，对于前端技术还是得了解一部分，对于Vue我还是看了会文档，靠着自己学过的Jquery和Html5勉勉强强懂些皮毛，对于热爱学习的朋友们可以在评论区留下你的联系方式，咱们可以建群或加好友互相讨论技术，本人主攻后端，励志成为全栈。