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

前置基础

资料下载-阿里云盘

vue
axios
element-ui
npm
vscode

初始化项目

1.创建vue2工程

1.1

vue create projectName

1.2 选择

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

Manually select features
+(*) Babel
+ ( ) TypeScript
+ ( ) Progressive Web App (PWA) Support
+(*) Router
+(*) Vuex
+(*) CSS Pre-processors
+(*) Linter / Formatter
+ ( ) Unit Testing
+ ( ) E2E Testing
Choose a version of Vue.js that you want to start the project with (Use arrow keys)
+2.x
+ 3.x
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
+n
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
Pick a linter / formatter config: (Use arrow keys)
+ ESLint + Airbnb config
+ESLint + Standard config
+ ESLint + Prettier
Pick additional lint features: (Press to select, to toggle all,to invert selection)
+(*) Lint on save
+ ( ) Lint and fix on commit
Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
+In dedicated config files
+ In package.json
Save this as a preset for future projects? (y/N)
+N

1.4 梳理项目结构

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

1. 重置`src/App.vue`组件中的代码

<template><div>App 根组件</div></template><script>exportdefault{name:'App'}</script><stylelang="less"scoped></style>

2. 重置`src/router/index.js`路由模块中的代码

importVuefrom'vue'importVueRouterfrom'vue-router'Vue.use(VueRouter)constroutes=[]constrouter=newVueRouter({routes})exportdefaultrouter

3. 清空`src/components`目录和`src/views`目录还有路由相关的。

4.把`图片素材`目录下的`images 文件夹`（项目中需要用到的图片），复制粘贴到src/assets目录下。

5.把global.less放到`src/views`目录下

6.并把`global.less`引入到main.js 资料下载在前面

import'@/assets/global.less'// 全局初始化样式

1.5 ESLint代码检查

1.在VSCode中, 下载这个插件

2. 非常非常非常重要

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

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

"eslint.run":"onType","editor.codeActionsOnSave":{"source.fixAll.eslint":true}

1.6 安装element-ui

npm install element-ui

1.封装新建`src/elementUI/index.js`, 在这里进行组件引入和注册

importVuefrom'vue'importElementUIfrom'element-ui'import'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)

2.在`main.js`中引入, 使其参与到webpack打包并在网页生效

import'@/elementUI'// 注册elementUI组件

1.5 封装请求库

核心思想: 分层架构

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

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

1. 安装axios

npminstallaxios

2. 新建`src/utils/request.js`项目核心请求方法的模块文件

importaxiosfrom'axios'// 创建一个自定的axios方法(比原axios多了个基地址)// axios函数请求的url地址前面会被拼接基地址, 然后axios请求baseURL+url后台完整地址constmyAxios=axios.create({baseURL:'http://big-event-vue-api-t.itheima.net'})// 导出自定义的axios方法, 供外面调用传参发请求exportdefaultmyAxios

3. 新建`src/api/index.js`项目接口方法统一管理模块文件

importrequestfrom'@/utils/request'// 导出接口方法exportconstregisterAPI=()=>{// 这里先用这个接口测试下, 如果url以http开头会忽略baseURL, axios直接请求此地址returnrequest({// 原地是一个Promise对象，内部包含了ajax请求// return 这个Promise对象到逻辑界面，丢到那边对Promise对象提取结果url:'/api/reg',method:'POST',data:{username:'lidongxu123',password:'111111',repassword:'111111'}})}

4.在任意组件`src/App.vue`中, 引入接口请求方法, 并请求数据

<template><div>App根组件</div></template><script>import{registerAPI}from'@/api'exportdefault{asynccreated(){constres=awaitregisterAPI()console.log(res)}}</script><style></style>