【前端28_Vue-Cli 脚手架】萌新指南、安装脚手架、创建项目、项目目录介绍、路由重定向、代码规范ESlint、常用组件：Element、Vue-Axios

Vue-cli 脚手架

介绍

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

安装

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

bash

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就是路由管理文件

• 路由重定向

javascript

{
  path: '/',
  // 路由重定向
  redirect:'/Login'
},

代码规范

萌新会遇到如下的错误

这并不是代码写错了，而是规范的问题

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

常用框架

Element ui

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

快速上手

Vue-Axios

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

在脚手架中添加依赖

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

javascript

import axios from 'axios'

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

javascript

// 这里的指针是为了在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)
  })