vue从入门到入土--------综合案例

目录

vue-cli

 组件库

axios 拦截器 

 proxy 跨域代理

 用户列表案例

总结

vue-cli

vue-cli（俗称：vue 脚手架）是 vue 官方提供的、快速生成 vue 工程化项目的工具。

vue-cli 的中文官网首页：https://cli.vuejs.org/zh/

• ① 开箱即用
• ② 基于 webpack
• ③ 功能丰富且易于扩展
• ④ 支持创建 vue2 和 vue3 的项目

2. 安装 vue-cli

vue-cli 是基于 Node.js 开发出来的工具，因此需要使用 npm 将它安装为全局可用的工具：

 2.1 解决 Windows PowerShell 不识别 vue 命令的问题

默认情况下，在PowerShell 中执行 vue --version 命令会提示如下的错误消息：

 解决方案如下：

• ① 以管理员身份运行 PowerShell
• ② 执行 set-ExecutionPolicy RemoteSigned 命令
• ③ 输入字符 Y ，回车即可

 3. 创建项目

vue-cli 提供了创建项目的两种方式：

 4. 基于 vue ui 创建 vue 项目

步骤1：在终端下运行 vue ui 命令，自动在浏览器中打开创建项目的可视化面板：

 步骤2：在详情页面填写项目名称

步骤3：在预设页面选择手动配置项目

 步骤4：在功能页面勾选需要安装的功能（Choose Vue Version、Babel、CSS 预处理器、使用配置文件）：

 步骤5：在配置页面勾选 vue 的版本和需要的预处理器

 步骤6：将刚才所有的配置保存为预设（模板），方便下一次创建项目时直接复用之前的配置：

 步骤7：创建项目并自动安装依赖包

vue ui 的本质：通过可视化的面板采集到用户的配置信息后，在后台基于命令行的方式自动初始化项目： 

 项目创建完成后，自动进入项目仪表盘

 5. 基于命令行创建 vue 项目

步骤1：在终端下运行 vue create demo2 命令，基于交互式的命令行创建 vue 的项目：

步骤2：选择要安装的功能：

 步骤3：使用上下箭头选择 vue 的版本，并使用回车键确认选择：

 步骤4：使用上下箭头选择要使用的 css 预处理器，并使用回车键确认选择：

 步骤5：使用上下箭头选择如何存储插件的配置信息，并使用回车键确认选择：

 步骤6：是否将刚才的配置保存为预设

 步骤7：选择如何安装项目中的依赖包：

 步骤8：开始创建项目并自动安装依赖包

 步骤9：项目创建完成：

6. 梳理 vue2 项目的基本结构 

 7. 分析 main.js 中的主要代码

 8. 在 vue2 的项目中使用路由

 8.2 学习：3.x 版本的路由如何创建路由模块

步骤1：在 vue2 的项目中安装 3.x 版本的路由：

步骤2：在 src -> components 目录下，创建需要使用路由切换的组件

 步骤3：在 src 目录下创建 router -> index.js 路由模块：     

 步骤4：在 main.js 中导入路由模块，并通过 router 属性进行挂载：

 步骤5：在 App.vue 根组件中，使用 <router-view> 声明路由的占位符：

 组件库

1. 什么是 vue 组件库

<template>
  <div>
    <h1>App 组件</h1>
  </div>
</template> <script>
export default {
  name: 'MyApp', }
</script> <style>
</style> 

module.exports = {
  devServer: {
    // 修改 dev 期间的端口号
    port: 3000,
    // 自动打开浏览器
    open: true
 }
} 

// 路由模块
import Vue from 'vue'
import VueRouter from 'vue-router'
// 安装路由插件
Vue.use(VueRouter)
// 创建路由实例对象
const router = new VueRouter({
  // 路由规则
  routes: [],
})
// 向外共享路由实例对象
export default router

import Vue from 'vue'
import App from './App.vue'
// 导入路由模块
import router from './router'
Vue.config.productionTip = false
new Vue({
  // 挂载路由
  router,
  render: h => h(App),
}).$mount('#app')

<template>
  <div>
   UserList
  </div>
</template> <script>
export default {
  name: 'UserList', }
</script> <style>
</style>

// 创建路由实例对象
const router = new VueRouter({
  // 路由规则
  routes: [
    // 路由重定向
   { path: '/', redirect: '/users', },
    // 用户列表的路由规则
   { path: '/users', component: UserList }
 ],
})

<template>
  <div>
    <!-- 路由占位符 -->
    <router-view></router-view>
  </div>
</template> <script>
export default {
  name: 'MyApp', }
</script> 

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 导入 axios
import axios from 'axios'
Vue.config.productionTip = false
// 全局配置 axios
axios.defaults.baseURL = 'https://www.escook.cn'
Vue.prototype.$http = axios
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

data() {
  return {
    // 用户列表数据，默认为空数组
    userList: [],
 }
}

created() {
  // 调用此方法，请求用户列表数据
  this.getUserList()
}

methods: {
  // 请求用户列表的数据
  async getUserList() {
    const { data: res } = await this.$http.get('/api/users')
    // res.status 等于 0 表示数据请求成功，否则，请求失败！
    if (res.status !== 0) return console.log('用户列表数据请求失
败！')
    this.userList = res.data
 },
} 

module.exports = {
  devServer: {
    port: 3000,
    open: true,
    // 当前项目在开发调试阶段，
    // 会将任何未知请求 (没有匹配到静态文件的请求) 代理到
https://www.escook.cn
    proxy: 'https://www.escook.cn'
 }
}

// 全局配置 axios
Vue.prototype.$http = axios
axios.defaults.baseURL = 'http://localhost:3000'

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
// 1. 导入 element-ui
import ElementUI from 'element-ui'
// 2. 导入 element-ui 的样式表
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
// 3. 将 ElementUI 安装为 vue 的插件
Vue.use(ElementUI)
Vue.prototype.$http = axios
axios.defaults.baseURL = 'http://localhost:3000'
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

请求根路径 'https://www.escook.cn'
1.获取用户列表
请求方式：GET
请求地址：/api/users
请求参数：无
添加用户  
请求方式：POST
请求地址：/api/users
请求参数：name 用户姓名（1 - 15 个字符之间）
         age 用户年龄（1 - 100 之间）
         position 职位（1 - 10 个字符之间）
请求结果：status 的值等于 0 表示成功
2删除用户
请求方式：delete
请求地址：/api/users/:id
请求参数：id 要删除的用户的Id（URL参数）
请求结果：status 的值等于 0 表示成功
3.获取用户信息
请求方式：GET
请求地址：/api/users/:id
请求参数：id 要查询的用户的Id（URL参数）
请求结果：status 的值等于 0 表示成功