vue环境配置与项目搭建

一、前后台分离

• 为什么前后台分离

  • 我们开发的项目分为前台和后台，前台指我们用于显示的内容，比如html、js、css等，也就是我们看到的页面，后台指java代码，用于处理数据，完成逻辑操作

  • 在传统的javaweb项目中，我们使用jsp实现前台页面的显示，这种项目前后台相当于是耦合在一起的，这样开发效率比较低

  • 使用模板引擎技术可以实现一定的前后台分离，将html代码和java代码剥离开，但是前台和后台依然部署在一个服务器上，无法单独开发测试

• 什么是前后台分离

  • 前后台分离指将前台代码和后台代码分为两个独立的项目，并单独部署，后端提供数据接口，前台负责数据的展示。两者完全分离，可独立开发测试，大大提高开发效率

  • 后台项目我们直接利用springboot构建，前台我们需要创建一个完整独立的Vue项目，并不是我们原先在webstorm中创建的project

二、什么是Vue.js

• Vue.js是目前最火的一个前端框架

• vue.js是一套构建用户界面的渐进式框架，只关注视图层，不仅易于上手，还便于第三方库或既有项目整合

• Vue.js是一个轻巧、高性能、可视化的MVVM库同时拥有非常容易上手的API

 三、后端中MVC和前端中MVVM的区别

四、Vue项目构建

1. 安装node

   • 简介：Node.js并不是我们平常使用的JavaScript库，它是一个JavaScript的运行环境，基于这个环境，我们可以不需要浏览器直接执行js代码。类似于java运行环境的JDK

   • 安装：官网下载直接安装即可

   • 验证安装成功

     • cmd中输入：node -v

     • 出现版本号即代表安装成功

2. npm

   • 简介：npm是一个软件包仓库，我们可以在npm中找到任何开源的js代码，npm类似于后台中maven的作用，maven帮助我们下载后台jar包，而npm可以帮助我们下载前台需要的框架，比如Jquery、LayUI、ElementUI等

   • 安装：node中自带npm，所以不需要再安装

   • 验证安装成功

     • cmd中输入npm -v

     • 出现版本号即代表安装成功

3. cnpm淘宝镜像

   • 因为npm的服务器在国外，会使我们安装依赖的速度很慢，所以我们使用淘宝镜像来安装依赖，即cnpm

   • 安装：

     • 在cmd中输入安装命令：

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

   • 验证安装成功

     • cmd中输入：cnpm -v

     • 出现一系列版本号即代表安装成功

4. 安装vue脚手架

   • Vue-CLI脚手架

     • 日常生活中，脚手架可以快速搭建形成一个框架。vue脚手架的作用跟日常生活中作用类似，可以帮助我们快速构建一个标准的前端vue项目，辅助开发

   • 安装：

     • cmd中执行命令

       npm install -g @vue/cli

     • 安装过程中出现如下错误

     • 

     • 解决办法，执行以下命令

       npm install -g –force @vue/cli

   • 验证安装成功

     • cmd中输入命令：vue -V(注意V是大写)

     • 出现vue版本号说明安装成功

5. 使用vue脚手架搭建项目

   • 新建项目文件夹，在cmd中通过cd命令进入到项目目录

   • 通过如下命令构建项目(注意：项目名不能使用大写字母)

     vue create vueproject

   • 出现如下信息说明项目构建成功

   • 

   • 项目运行

     1. 在cmd中依次执行以下命令启动

        cd vueproject

        npm run serve

     2. 在webstorm中启动项目

        • 配置node运行环境，右上角点击add configuration，在打开的页面中点击左上角+号，选择npm，添加node.exe 如下图，保存设置，点击甲壳虫启动即可

        • 

        • 还可以在Terminal中输入npm run serve 启动项目

     3. 访问项目

        在浏览器中输入提示的网址：http://localhost:8080进入vue项目的主页面

五、vue项目开发

• 单页面父应用

  • 概念：单页面应用程序是指将所有的活动局限于一个web页面中，仅在该web页面初始化时加载相应的html、javaScript和css。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转，取而代之的是利用javaScript动态的变换html的内容，从而实现UI和用户的交互

  • 我们通常所说的单页面应用通过前端框架(vue、angular、react)进行开发

  • 优点：良好的交互体验、良好的前后端工作分离模式、减轻服务器压力

  • 缺点：首屏加载慢，不适合开发大型项目

六、组件化开发

• 在vue这种单页面应用项目中，我们用组件来代替一个个的页面

• 在vue项目中，我们会把组件创建为一个vue文件，对应一个页面。该文件主要包含三部分：template模板内容、JavaScript内容和css样式。比如App.vue，就相当于我们的首页。

 

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>



<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

    template中必须包含唯一的一个根标签

<template>
    <div>
        <h1>这是主页的内容</h1>
<!--    3.使用组件，将组件标签化-->
        <Menu></Menu>
<!--    之前注册组件时，如果组件名使用了驼峰命名，则在使用组件的时候，需要将大写字母改为小写，
            中间用-连接，如果组件名没有使用驼峰命名，直接将名称标签化使用即可-->
        <emp-list></emp-list>
    </div>
</template>

<script>
    //1.将要使用的组件引入
    import Menu from '@/components/Menu.vue'
    import EmpList from '@/components/EmpList.vue'
    export default {
        name: "Home",
        //2.使用components属性注册组件
        components: {
            Menu,
            EmpList
        }
    }
</script>

<style scoped>

</style>

<template>
    <div>
        <h1>菜单列表</h1>
    </div>
</template>

<script>
    export default {
        name: "Menu"
    }
</script>

<style scoped>

</style>

<template>
    <div>
        <h1>员工列表</h1>
    </div>
</template>

<script>
    export default {
        name: "EmpList"
    }
</script>

<style scoped>

</style>