Vue 快速入门(九)

本节介绍Vue脚手架模块化开发概念

01 - Vue脚手架搭建

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，CLI(@vue/cli)是一个全局安装的npm包，提供了终端里的vue命令。它可以通过vue create快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。

Vue-CLI安装

这里我们先安装，安装时进行全局安装，如：

npm install ‐g @vue/cli

安装初始化工具

拉取 2.x 模板 (旧版本) Vue CLI > = 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vuecli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli -init

查看Vue版本

vue -V

创建项目

vue init webpack 项目名

我这里的安装记录如下：

PS K:\> vue -V
@vue/cli 5.0.8
PS K:\> vue init webpack new-testvue

? Project name new-testvue
? Project description A Vue.js project
? Author new-testvue
? Vue build standalone      
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "new-testvue".


# Installing project dependencies ...
# ========================

[..................] \ idealTree:new-testvue: sill idealTree buildDeps

可以参考上面或根据自己情况选择进行安装。

按照我的步骤操作后，会有这样的一个项目结构，如图：

完整的结构项目结构：

├── README.md                       项目介绍
├── index.html                      入口页面
├── build                           构建脚本目录
│   ├── build-server.js                 运行本地构建服务器，可以访问构建后的页面
│   ├── build.js                        生产环境构建脚本
│   ├── dev-client.js                   开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
│   ├── dev-server.js                   运行本地开发服务器
│   ├── utils.js                        构建相关工具方法
│   ├── webpack.base.conf.js            wabpack基础配置
│   ├── webpack.dev.conf.js             wabpack开发环境配置
│   └── webpack.prod.conf.js            wabpack生产环境配置
├── config                          项目配置
│   ├── dev.env.js                      开发环境变量
│   ├── index.js                        项目配置文件
│   ├── prod.env.js                     生产环境变量
│   └── test.env.js                     测试环境变量
├── mock                            mock数据目录
│   └── hello.js
├── package.json                    npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
├── src                             源码目录    
│   ├── main.js                         入口js文件
│   ├── app.vue                         根组件
│   ├── components                      公共组件目录
│   │   └── title.vue
│   ├── assets                          资源目录，这里的资源会被wabpack构建
│   │   └── images
│   │       └── logo.png
│   ├── routes                          前端路由
│   │   └── index.js
│   ├── store                           应用级数据（state）
│   │   └── index.js
│   └── views                           页面目录
│       ├── hello.vue
│       └── notfound.vue
├── static                          纯静态资源，不会被wabpack构建。
└── test                            测试文件目录（unit&e2e）
    └── unit                            单元测试
        ├── index.js                        入口脚本
        ├── karma.conf.js                   karma配置文件
        └── specs                           单测case目录
            └── Hello.spec.js

启动运行

我们打开终端，然后输入：

npm run dev

浏览器访问项目地址

启动后，浏览器访问地址：http://localhost:8080 ，如图：

代码解释：

main.js入口js文件代码解析:

app.vue根组件文件解析：

备注:

所有路由的视图都在这个router-view里完成的，里面所有内容都是会变化的，而外面内容是固定的，例如logo.png是不会随着路由内容改变而变化。

02 - 案例演示

新建组件

简单写个组件来演示一下，在components文件夹下新建一个单文件组件LoveVue.vue，如下：

代码如下：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '欢迎来到Vue的知识库学习！'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

配置路由

配置完后，需要在首页配置一个跳转的入口，如：

这里路由跳转有两种方法，一种很Js写法，一种Vue写法。

 <li>
     <router-link to='/lookvue'>查看VUE-one</router-link>
</li>
 

  <li>
        <a href="/#/lookvue" target="_blank">
          查看VUE-two
        </a>
      </li>

启动

启动后页面显示：

03 - Axios（ajax请求）

前面已经学习过axios的应用，现在我们在脚手架里来使用一下。

Axios安装

npm i axios

这里会有个问题，安装其他插件的时候，可以直接在 main.js 中引入并 Vue.use()，但是 axios 并不能 use，只能每个组件(.vue文件)需要发送请求的组件中即时引入。
所以要使用的话，有两种方法：

1. 第一种插件法

安装：npm install --save axios vue-axios

也可以这样安装：

npm i axios
npm i vue-axios

安装完后，由于vue-axios是按照vue插件的方式去写的。那么结合vue-axios，就可以去使用vue.use方法了。

首先在入口文件main.js中引用：

import   axios  from  'axios'
import  VueAxios from  'vue-axios'

Vue.use(VueAxios,axios);


这是固定写法，使用方法：

this.axios.get('http://localhost:8811/user/getAllUsers'
            //, {
            //     params: {
            //         ID: 12345
            //     }
            // }
            )
            // 当使用箭头函数  this 指向的是外层
            .then(response =>{
                this.users=response.data.data;
            })
            .catch(function (error) {
                console.log(error);
            });

2. 第二种axios 改写为 Vue 的原型属性

import axios from 'axios'

Vue.prototype.$axios= axios
使用方法：
this.$axios.post('地址', data)

.then(function (response) {

          console.log(response);

        }).catch(function (error) {

          console.log(error);

        });

可参考官网：http://www.axios-js.com/zh-cn/docs/

Axios请求示例

这里示范第一种写法的代码案例，首先引用下载的模块，如图：

代码：

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios);

LoveVue.vue组件文件中需要新增一些代码，如图：

代码写好后，保存自动会加载，加载后的效果，如图：

第二种方法，可以自己动手试试效果。

知识点回顾

1. 一个组件就是一个VUE实例，就是一个.VUE文件
2. 单文件组件由三大块组成:

<template></template>
<script><script>
<style scoped></style>

3. 重复的组件可以单独抽出来成一个独立的组件
4. 所有路由的视图都在这个</router-view>里完成的

工欲善其事，必先利其器！

posted @ 2023-01-28 22:02 全栈测试开发日记阅读(144) 评论(0) 收藏举报

刷新页面返回顶部

全栈测试开发日记

像蚂蚁一样工作，像蝴蝶一样生活

Vue 快速入门(九)

01 - Vue脚手架搭建

02 - 案例演示

03 - Axios（ajax请求）

公告