从项目创建到首页完成的过程,文字部分

本文详细记录了使用Vue.js创建项目的过程,包括初始化项目、VueRouter的配置、样式和组件的处理,以及 vant UI 框架的引入和使用。同时讲解了登录功能的实现,包括表单验证、axios发送请求,以及token的保存。还涉及到了本地存储、vuex管理和git分支管理。
摘要由CSDN通过智能技术生成

一:初始化项目

  1. 创建项目

(1).创建项目。找到要创建项目的文件夹 输入CMD 进入小黑窗 输入“vue create 项目名” 创建我们这个项目

 (2)进入版本选择 按上下键选 选择最后的自定义版本 按回车键

(3)按上下键进行切换 按空格键进行选择 选择上面四个 选择完毕之后按回车键(默认是有lint的 但是创建过程中 按了空格键 取消了对lint的选择)

(4)选择2.x版本的vue 按回车键

(5)这里是选择路由模式是history模式还是hash模式 我们选择hash模式 所以 输入“n” 代表no 然后按回车键

(6)选择css预处理器 我们选择的是less

(7)这里是问我们的这些配置的模块 是单独一个文件夹 还是放在package.json文件夹 我们选择第一个

(8)这里是问你这些 设置是否要保存下来 如果你选择了Y 那么会让你输入一个名字代表存储了这些设置 哪你下次创建项目就可以直接选择这个保存好了的设置

(9)项目创建中

(10) 成功的创建了项目 系统有两句提示 “cd + 项目名” 进入项目。“npm run serve”运行项目。 我们按照提示命令以此输入

(11)会给我们一个本地地址

 (12)输入到浏览器打开

2. VueRouter命令路由 router-view标签 路由规则 views文件夹 to属性

(1)在VueRouter里 有两种文件引入的方式

第一种:(导入时)import 自定义页面名 from ‘页面路径’ (使用时)直接写这个自定义页面名

第二种:直接在使用这个页面时导入

(2)Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。

(3).router-link

请注意,我们没有使用常规的 a 标签,而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL,处理 URL 的生成以及编码。我们将在后面看到如何从这些功能中获益。

(4)router-view

router-view 将显示与 url 对应的组件。你可以把它放在任何地方,以适应你的布局。

3.清除默认全局样式

设置padding为0,margin为0

4.盒子模型paddingmargin

padding 属性定义元素边框与元素内容之间的空白区域

margin属性是用与设置外

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值