Vue-cli 脚手架
介绍
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。
就是说我们在开发的时候,前期需要配置很多东西(网络组件,路由组件,打包组件等等),有了Vue-cli脚手架,他会帮我们集成这些功能
安装
可以通过以下命令,在命令行里敲
1 | npm install -g @vue/cli |
创建一个项目
创建项目有两种方法
找到想要创建项目的文件夹,在此文件夹下打开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 | { |
代码规范
萌新会遇到如下的错误
这并不是代码写错了,而是规范的问题
这个ESLint
插件帮我们检查的,前期的规范想养成的养成,也可以关掉规范检查,如下
常用框架
Element ui
首先在依赖中安装 element-ui
,安装好依赖之后,在main.js
中引入
Vue-Axios
axios是网络请求,原生网络请求的封装
在脚手架中添加依赖
- 前台发起请求可以这样写,首先要在组件脚本开头引入
axios
1 | import axios from 'axios' |
然后写逻辑代码,写链式的话会比较清晰。
1 | // 这里的指针是为了在axios里使用组件里的参数 |