「掘金日新计划 · 4 月更文挑战」一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，
环境搭建
1.如果下载缓慢请配置 npm 淘宝镜像 npm configset registry
2.全局安装 @vue/cli npm instal1 -g @vue/cli
3.切换到创建项目的目录，使用命令创建项目 vue create xxx
4.选择使用 vue 的版本
5.启动项目 npm run serve
6.打包项目 npm run build
7.暂停项目 ctr+C
> Vue脚手架 隐藏了所有 webpack 相关的配置，若想查看具体的 webpack 配置，请执行vue inspect > output.js
目录结构
单页面应用 + 组件
- 单页面应用
整个web应用中就一个html页面(public/index.html)
所有的页面都是vue组件，切换页面其实是在切换组件
- 面向组件
1. 每个页面都是一个组件(路由组件) 动态加载
2. 页面中的每个模块也都是一个组件(非路由组件) 静态加载
MVVM
- 核心思想就是把数据(Model) 和 视图(View)分开 - htmI只定义页面结构 - js准备数据 - vue可以把数据加载(染)到html中
移动端
1.准备
- reset.css
src/assets/reset.css
引入
在main.js中
import '@/assets/reset.css - 安装vant
vant-ui组件库中定义好了常用的很多vue组件，可以直接使用!
安装
npm instal1 vant -S
引入所有组件
main.js
import vant from 'vant
Vue.use(Vant);
按需引入 (只引入需要的部分组件)
import {Button} from 'vant
Vue.use(Button);
2.底部 tab 导航
1. Tabbar组件开发
src/components/Tabbar.vue
template
script
style
2. 使用组件
- 引入
- 注册
- 使用
3.页面路由
开发页面(路由组件)
使用
配置路由
src/router/index.js
import Home from '@/views/Home.vue/'
配置
{name: "home", path:"/home" component: Home}`
路由视图容器(路由组件显示位置)
动态切换路由组件 this.$router.push("/home");
这节完成效果
