vue2.0安装（安装vuecli2）

编程日记 • 2026-02-04 12:30 • 阅读 0

安装脚手架：全局安装

作用：在任何一个目录下都能通过命令创建项目

注意：低版本的执行这行命令可能会报错，需要升级版本

创建项目

在指定的目录下，执行命令

作用：通过网页页面方式创建项目

勾选、

创建之后，会在后台自动创建依赖

安装devtools

方便调试项目

注意：有些高版本的 devtools 在vue2里面用不了，需要选择合适的版本

启动项目

修改端口

默认启动端口是8080，自定义修改

配置网址

添加代理

解决跨域问题，添加代理

解释：

assets：静态资源
components：可重用组件
router：路由
store：数据共享
view：视图组件
App.vue：最顶层根组件
main.js：项目入口

以后还会添加

api：跟后台交互，发送 fetch，xhr请求，接收响应
plugins：插件

的组件文件以结尾，每个组件由三部分组成

解释：

template模板部分，由它生成 html 代码
script代码部分，控制模板的数据来源和行为
style样式部分，一般不怎么关心

代码示例：

其中定义和导出 options 对象是约定好的。

整个流程

代码示例

5.属性绑定 v-bind

代码示例

一般在表单中使用这种双向绑定

代码示例

如果F12看不到 vue devtools，把配置打开

最重要的不同点，computed有缓存，只需要执行一次代码，而方法调用每调用一次需要执行一遍代码。

它的底层是用了方式发送请求和接收响应，相对于之前讲过的来说，功能更加强大，但由于是比较老的，不支持 ,对进行了封装，使之支持 promise，并提供了对请求、响应的统一拦截。

安装

代码示例

axios发送请求

请求备注 axios.get(url[, config]) 常用 axios.delete(url[, config]) axios.head(url[, config]) axios.options(url[, data[,config]]) axios.post(url[, data[,config]]) 常用 axios.put(url[, config]) axios.patch(url[, config])

说明

config - 选项对象、例如查询参数、请求头...
data - 请求体数据、最常见的是 json 格式数据

axios拦截器

自己封装一个自定义的

请求拦截器：在请求发送前，可以在这里添加、调整请求配置等。

响应拦截器：对返回数据进行统一处理，针对不同状态码进行错误处理。

封装方法：如和封装可以简化调用，其他方法可以按需添加。

调用示例

代码示例

AddButton.vue

DeleteButton.vue

EditButton.vue

App.vue

今天的文章 vue2.0安装（安装vuecli2）分享到此就结束了，感谢您的阅读。

vue2.0安装（安装vuecli2）

创建项目

安装devtools

添加代理

axios发送请求

axios拦截器

相关推荐