vue2-elementUI-初始化启动项目-git

前置基础

资料下载-阿里云盘

  1. vue
  2. axios
  3. element-ui
  4. npm
  5. vscode

初始化项目

1.创建vue2工程

1.1

bash 复制代码
vue create projectName

1.2 选择

1.3 初始化 vue-cli 的核心步骤:

  1. Manually select features
    • (*) Babel
    • ( ) TypeScript
    • ( ) Progressive Web App (PWA) Support
    • (*) Router
    • (*) Vuex
    • (*) CSS Pre-processors
    • (*) Linter / Formatter
    • ( ) Unit Testing
    • ( ) E2E Testing
  2. Choose a version of Vue.js that you want to start the project with (Use arrow keys)
    • 2.x
    • 3.x
  3. Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
    • n
  4. Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
    • Sass/SCSS (with dart-sass)
    • Sass/SCSS (with node-sass)
    • Less
    • Stylus
  5. Pick a linter / formatter config: (Use arrow keys)
    • ESLint + Airbnb config
    • ESLint + Standard config
    • ESLint + Prettier
  6. Pick additional lint features: (Press to select, to toggle all, *to invert selection)
    • (*) Lint on save
    • ( ) Lint and fix on commit*
  7. Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
    • In dedicated config files
    • In package.json
  8. Save this as a preset for future projects? (y/N)
    • N

1.4 梳理项目结构

为项目开发做准备,把不需要的代码、文件删除掉

1. 重置 src/App.vue 组件中的代码
html 复制代码
<template>
  <div>App 根组件</div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="less" scoped></style>
2. 重置 src/router/index.js 路由模块中的代码
js 复制代码
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = []

const router = new VueRouter({
  routes
})

export default router
3. 清空 src/components 目录和 src/views 目录还有路由相关的。
4.把图片素材目录下的 images 文件夹(项目中需要用到的图片),复制粘贴到 src/assets 目录下。
5.把global.less放到src/views 目录下
6.并把global.less 引入到main.js 资料下载在前面
js 复制代码
import '@/assets/global.less' // 全局初始化样式

1.5 ESLint代码检查

1.在VSCode中, 下载这个插件
2. 非常非常非常重要

一定要把脚手架工程, 作为vscode根目录 , 因为vscode+eslint插件要使用配置文件.eslintrc, 按照这个的规则检查你的代码

3.一定要配置插件监测的时机, 修改ESLint插件配置


js 复制代码
"eslint.run": "onType",
"editor.codeActionsOnSave": {
	"source.fixAll.eslint": true
}

1.6 安装element-ui

npm 复制代码
npm install element-ui
1.封装新建src/elementUI/index.js, 在这里进行组件引入和注册
js 复制代码
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
2.在main.js中引入, 使其参与到webpack打包并在网页生效
js 复制代码
import '@/elementUI' // 注册elementUI组件

1.5 封装请求库

核心思想: 分层架构

在任意组件, 调用封装的接口方法, 接口方法调用统一的axios函数告诉他请求的参数, 它去请求数据

我(任意组件) -> 秘书(接口函数) -> 车(axios) -> 数据(后台返回)

1. 安装axios
bash 复制代码
npm install axios
2. 新建src/utils/request.js项目核心请求方法的模块文件
js 复制代码
import axios from 'axios'

// 创建一个自定的axios方法(比原axios多了个基地址)
// axios函数请求的url地址前面会被拼接基地址, 然后axios请求baseURL+url后台完整地址
const myAxios = axios.create({
  baseURL: 'http://big-event-vue-api-t.itheima.net'
})

// 导出自定义的axios方法, 供外面调用传参发请求
export default myAxios
3. 新建src/api/index.js项目接口方法统一管理模块文件
js 复制代码
import request from '@/utils/request'

// 导出接口方法
export const registerAPI = () => {
  // 这里先用这个接口测试下, 如果url以http开头会忽略baseURL, axios直接请求此地址
  return request({
    // 原地是一个Promise对象,内部包含了ajax请求
    // return 这个Promise对象到逻辑界面,丢到那边对Promise对象提取结果
    url: '/api/reg',
    method: 'POST',
    data: {
      username: 'lidongxu123',
      password: '111111',
      repassword: '111111'
    }
  })
}
4.在任意组件src/App.vue中, 引入接口请求方法, 并请求数据
js 复制代码
<template>
  <div>App根组件</div>
</template>

<script>
import { registerAPI } from '@/api'
export default {
  async created () {
    const res = await registerAPI()
    console.log(res)
  }
}
</script>

<style></style>

这种分层架构思想, 可以更好的统一管理项目中所有接口, 并也方便统一给axios方法添加拦截器和修改基地址

相关推荐
EndingCoder5 分钟前
算法与前端的可访问性
前端·算法·递归·树形结构
brzhang12 分钟前
别再梭哈 Curosr 了!这 AI 神器直接把需求、架构、任务一条龙全干了!
前端·后端·架构
Kagol20 分钟前
TinyEditor v4.0 alpha 版本发布,更强大的表格、更丰富的表情、体验更好的图片/视频/文件上传功能
前端·开源
The_era_achievs_hero25 分钟前
微信131~140
开发语言·javascript·微信
然我30 分钟前
路由还能这么玩?从懒加载到路由守卫,手把手带你解锁 React Router 进阶技巧
前端·react.js·面试
良木林2 小时前
JavaScript书写基础和基本数据类型
开发语言·前端·javascript
工业甲酰苯胺8 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
brzhang8 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止9 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms9 小时前
前端项目集成lint-staged
前端·vue·lint-staged