速通前端
2022-03-06 本文已影响0人
赵恩栋
一、前期准备工作
- 前端编辑器
- 熟悉html，css，js基本语法
- 简单熟悉vue.js中的基本语法结构
- 安装node环境
- 安装vue/cli
npm install -g @vue/cli
二、前端编辑器
推荐两款前端编辑器
- vscode（全称Visual Studio Code），功能强大
- VScode 官网地址：https://code.visualstudio.com/
- VScode 官方文档地址：https://code.visualstudio.com/docs
- HBuilder X：简洁、快速，对uniapp的支持好
- HBuilder X官方地址 HBuilderX-高效极客技巧 (dcloud.io)
三、前端基础语法
推荐菜鸟教程：html、css、js（全称JavaScript）
菜鸟教程 - 学的不仅是技术，更是梦想！ (runoob.com)
image-20220304132747118
四、熟悉vue.js
参考vue.js官网介绍 — Vue.js (vuejs.org)
隔壁前端班的课件课件 · xxs/Vue课件及源码 - 码云 - 开源中国 (gitee.com)
4.1 了解基本指令
- v-if 、 v-else-if 、v-else
- v-show （了解v-if和v-show的区别）
- v-bind ,可以简写成
:参考模板语法 — Vue.js (vuejs.org) - v-model ，参考表单输入绑定 — Vue.js (vuejs.org)
- v-for 循环遍历 基本的结构
v-for(item,index) in items :key="index"- items表示我们要遍历的数组
- item表示从数组下标0依次遍历得到的结果
- index表示当前遍历下标值
- 其中
:key="index"不是必填的，但是如果我们不填写了话，用了Eslint代码规范检查，它将报错
- v-on 可以直接简写成符号
@,可以用v-on指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。参考：事件处理 — Vue.js (vuejs.org)
4.2 组件基础
4.2.1 组件的两种注册方法
- 全局注册
- 局部注册
4.2.2组件间的传参
- 父组件往子组件中传参
- 子组件往父组件中传参
- 拓展：了解VueX
4.3 插槽的用法
五、vue-cli准备工作
安装node环境
安装步骤：
-
更改全局模块和缓存的位置（默认是在C盘）
-
配置环境变量
-
配置npm的加速镜像任选其一（https://cloud.tencent.com/developer/article/1372949）
六、创建一个项目
方法一：使用
vue create helloWorld（helloWorld是文件名）
vue cli创建项目步骤详细信息：
了解每一个选项的作用
https://segmentfault.com/a/1190000022684511
方法二：使用命令
vue ui，进入可视化面板创建
image-20220304140317069
七、掌握vue-router路由
课件/13Vue路由.md · xxs/Vue课件及源码 - 码云 - 开源中国 (gitee.com)
使用：
情况一：我们在创建的时候，选择了Router配置
image-20220304140745407
在生成的vue框架的main.js中
import Vue from 'vue'
import App from './App.vue'
import router from './router' //这儿就是帮我们引入router模块
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
router, //使用我们引入的router
store,
render: h => h(App)
}).$mount('#app')
然后在src\router\index.js中自动生成（初始化）
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/mfei666',
name: 'Mfei',
component: () => import('../views/Mfei.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
情况二：创建的时候没有选择Router配置
此时需要我们手动安装router模块，安装命令
npm i vue-router
image-20220304141534915
八、使用axios请求数据
参考地址：课件/10配置代理.md · xxs/Vue课件及源码 - 码云 - 开源中国 (gitee.com)
-
安装
axiosnpm i axios -
import axios from 'axios'引入axios -
实例如下
<template> <div> <input v-model="city" /> <button @click="getTianQi()"> 获取天气信息 </button> <!-- =============================== --> <div v-if="info !==null || info !== underfind"> <span>当前城市：{{info.city}}</span> <div>以下是未来七日天气</div> <div v-for="(item,index) in info.data" :key="index"> <span>当前日期：{{item.date}}</span> <span>天气情况：{{item.wea}}</span> <span>实时温度：{{item.tem}}</span> <span>风速：{{item.win_meter}}</span> </div> </div> </div> </template> <script> import axios from "axios"; export default { name:'App', methods: { getTianQi() { if (this.city == null) { alert("城市名称不能为空") } else { axios.get('https://www.tianqiapi.com/api?version=v1&appid=21375891&appsecret=fTYv7v5E&city=' + this .city).then( response => { console.log(response) console.log('请求成功', response.data); this.info = response.data; }, error => { console.log('请求失败', error.message); } ) } } } } </script>
九、使用element ui
以下实例基于vue 2.x 版本构建
npm 安装
推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
npm i element-ui -S
完整引入
在 main.js 中写入以下内容：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
之后熟悉组件，哪是我们需要的组件，哪里需要引哪里.
例如
<template>
<el-time-picker
v-model="value1"
:picker-options="{
selectableRange: '18:30:00 - 20:30:00'
}"
placeholder="任意时间点">
</el-time-picker>
<el-time-picker
arrow-control
v-model="value2"
:picker-options="{
selectableRange: '18:30:00 - 20:30:00'
}"
placeholder="任意时间点">
</el-time-picker>
</template>
<script>
export default {
data() {
return {
value1: new Date(2016, 9, 10, 18, 40),
value2: new Date(2016, 9, 10, 18, 40)
};
}
}
</script>
注意：把需要的代码模块按需放到自己的代码中，<template></template>
十、使用uniapp
介绍uniapp：一套代码，十几个平台通用
10.1 创建项目
使用HBuilder X创建默认模板
image-20220304144857900
运行项目
image-20220304151623743
新建两个页面
image-20220304151718639
然后在pages.json中配置我们的页面属性
看查看全局文件官网信息uni-app官网 (dcloud.io)
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/test/index",
"style": {
"navigationBarTitleText": "购物车",
"navigationBarBackgroundColor": "red",
"navigationBarTextStyle":"black"
}
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "商场",
"navigationBarTextStyle":"white",
"navigationBarBackgroundColor": "#007AFF"
}
},
{
"path": "pages/test/shoucang",
"style": {
"navigationBarTitleText": "收藏页",
"navigationBarTextStyle":"white",
"navigationBarBackgroundColor": "#007AFF"
}
}
],
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "red",
"list": [{
"pagePath": "pages/test/index",
// "iconPath": "static/image/icon_component.png",
// "selectedIconPath": "static/image/icon_component_HL.png",
"text": "逛逛"
}, {
"pagePath": "pages/index/index",
// "iconPath": "static/image/icon_API.png",
// "selectedIconPath": "static/image/icon_API_HL.png",
"text": "消息"
},
{
"pagePath": "pages/test/shoucang",
// "iconPath": "static/image/icon_API.png",
// "selectedIconPath": "static/image/icon_API_HL.png",
"text": "购物车"
}
]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
