vue.js vue的环境搭建和路由的生成和ajks的添加

第一。 安装nodejs

第二。配置国内源加速

第三。安装vue客户端

第四。创建第一个应用

 

1、安装nodejs：

1.1、下载

官网下载地址：【v18.13.0】

1.2、验证

命令行输入：node -v，若显示具体版本（如下图），则表示安装成功。

 

 

2、配置npm国内源加速：
2.1、配置：

控制台执行命令：npm config set registry http://registry.npmmirror.com

2.2、验证：

命令行输入：npm config get registry，若显示具体版本（如下图），则表示配置成功。

 

 

3、安装vue-cli：

3.1、安装：

控制台执行命令：npm install -g @vue/cli

3.2、验证：

命令行输入：vue -V，若显示具体版本（如下图），则表示安装成功。

 

 

 

4、创建第一个vue应用：

控制台执行命令：vue create vueapp01

4.1、选择版本：

 

 

 4.2、选择依赖（在此选择Babel和Router）：

 

 选好后，回车，则会创建项目以及引入相关包，创建完成后，进入目录：cd vueapp001

 

4.3、控制台执行命令：npm run serve

控制台提示如下内容，则表示运行完成：

 

 此时打开浏览器，访问网址（默认http://localhost:8080/），可以看到如下内容。

 这样你就完成了你的第一个vue的项目啦

 二 、路由

 以前的项目开发中，路由都是由后台来完成的，通过用户请求的URL导航到具体的HTML页面，前端路由就是通过配置JavaScript文件，把把这个工作拿到前端来实现。

通俗来说，路由就是根据不同的URL地址展示不同的内容或页面。

在这个例子中，我们首先引入了 Vue.js 和 vue-router 库。然后，我们定义了两个组件 Home 和 About，并定义了两个路由映射，将它们分别映射到 /home 和 /about 路径。接着，我们创建了一个 router 实例，并将路由映射传递给它。最后，我们创建了一个根实例，并将 router 实例挂载到它上面。

当用户点击 Home 或 About 链接时，路由器会根据路由映射自动渲染相应的组件。在这个例子中，我们将组件渲染到了 <router-view> 标签中。

在Vue.js中使用AJAX可以通过以下步骤实现：

1. 安装axios库：在命令行中输入`npm install axios`进行安装。

 点击打开集成中端

在中端里面输入

点击回车就等待安装完成就装好了 

2. 在Vue组件中引入axios库：在需要使用AJAX的Vue组件中，使用`import axios from 'axios'`引入axios库。

3. 发送AJAX请求：使用axios库提供的方法发送AJAX请求，例如：

```javascript
axios.get('/api/data')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })
```

这段代码会向服务器发送一个GET请求，请求地址为`/api/data`，并在请求成功时打印返回的数据，请求失败时打印错误信息。

4. 处理返回数据：在请求成功时，可以通过`response.data`获取服务器返回的数据，然后将数据传递给Vue组件的数据模型，例如：

```javascript
axios.get('/api/data')
  .then(response => {
    this.data = response.data
  })
  .catch(error => {
    console.log(error)
  })
```

这段代码会将服务器返回的数据赋值给Vue组件的`data`属性，从而更新页面上的数据。

以上就是在Vue.js中使用AJAX的基本步骤。需要注意的是，由于AJAX请求是异步的，因此需要使用Promise或async/await等方式处理异步操作。另外，还需要注意跨域问题，可以通过设置服务器端的CORS或使用代理等方式解决。