Vue-cli 脚手架

介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。
就是说我们在开发的时候，前期需要配置很多东西（网络组件，路由组件，打包组件等等），有了Vue-cli脚手架，他会帮我们集成这些功能

安装

可以通过以下命令，在命令行里敲

1
2
3
npm install -g @vue/cli
# OR
yarn global add @vue/cli

创建一个项目

创建项目有两种方法

  1. 代码创建
  2. 图形界面GUI

    代码创建

  • 找到想要创建项目的文件夹，在此文件夹下打开cmd，（按住shift + 鼠标右键），在右键菜单里打开powershell或者是git bash。（PS:如果在PowerShell中出现cannot be loaded because running scripts is disabled on this system.）问题，打开链接阅读。

  • 输入命令vue create 项目名字
    在这里插入图片描述

  • 选择安装依赖（babel 是es6转es5的工具，eslint是代码格式校验工具，默认是安装这两个依赖的，如果没选上，后期也可以选择添加的，莫慌，router是路由模块，是我自己加的，因为会用到）
    在这里插入图片描述

  • 我的配置大概是这样，这个自由性很高，没必要都一样
    在这里插入图片描述

  • 稍等几分钟，成功的话会提示你的在这里插入图片描述

    图形界面GUI创建项目

  • 在cmd中输入命令vue ui，回车之后稍等一会，会在浏览器中弹出页面。

  • 紧接着跟着图示走就可以了，建项目的时候也会很慢，稍等即可。

在这里插入图片描述

项目目录介绍

新建好之后是如下这样的（可能有些文件不一样，莫慌）
在这里插入图片描述

  • 其中最重要的是src了，以后打代码都是在src里打
    • App.vue： 首页
    • main.js ：入口文件
    • assets：静态文件
    • components：组件
    • router：路由配置

路由

在脚手架右上角会有提示，让你安装vue-router
安装完之后就会在src文件夹生成router文件，里面的js就是路由管理文件

  • 路由重定向
1
2
3
4
5
{
  path: '/',
  // 路由重定向
  redirect:'/Login'
},

代码规范

萌新会遇到如下的错误
在这里插入图片描述
这并不是代码写错了，而是规范的问题
在这里插入图片描述

这个ESLint插件帮我们检查的，前期的规范想养成的养成，也可以关掉规范检查，如下

在这里插入图片描述

常用框架

Element ui

首先在依赖中安装 element-ui，安装好依赖之后，在main.js中引入

快速上手在这里插入图片描述
在这里插入图片描述

Vue-Axios

axios是网络请求，原生网络请求的封装

在脚手架中添加依赖
在这里插入图片描述

  • 前台发起请求可以这样写，首先要在组件脚本开头引入axios
1
import axios from 'axios'

然后写逻辑代码，写链式的话会比较清晰。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 这里的指针是为了在axios里使用组件里的参数
let _this = this;

// 前台发送请求
axios.get('http://localhost:3000/register', {
  params: {
    username:this.username,
    psw:this.psw
  }
})
  .then(function (response) {
    // 提示注册成功
    // axios 中的this需要定向
    // console.log(response);
    if (response.data == '200'){
      _this.$message({
        message: `${_this.username}注册成功`,
        type: 'success'
      })
    }
  })
  .catch(function (error) {
  	// 抓取错误
    console.log(error)
  })