一、前期准备工作
- 前端编辑器
- 熟悉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)
四、熟悉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
,进入可视化面板创建
七、掌握vue-router
路由
课件/13Vue路由.md · xxs/Vue课件及源码 - 码云 - 开源中国 (gitee.com)
使用:
情况一:我们在创建的时候,选择了Router配置
在生成的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
八、使用axios请求数据
参考地址:课件/10配置代理.md · xxs/Vue课件及源码 - 码云 - 开源中国 (gitee.com)
安装
axios
npm 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创建默认模板
运行项目
新建两个页面
然后在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"
}
}