avatar

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

Vue-cli 脚手架

介绍

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

安装

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

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

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

代码规范

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

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

在这里插入图片描述

常用框架

Element ui

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

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

Vue-Axios

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

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

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

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

javascript
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)
})
文章作者: Lovely Ruby
文章链接: https://wangzhongqing.xyz/p/225e122a.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Ruby の いえ
打赏
  • 微信
    微信
  • 支付寶
    支付寶

评论