01-vue移动端项目(搭建项目,vant的简单基本使用)

最新推荐文章于 2024-08-08 08:32:38 发布

大力99

最新推荐文章于 2024-08-08 08:32:38 发布

阅读量1.4k

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/Tangoneone/article/details/106632305

版权

笔记专栏收录该内容

67 篇文章 7 订阅

订阅专栏

01-搭建项目结构

步骤:

1.0 在桌面上打开终端
2.0 使用终端创建一个项目
- 执行指令： vue create heimatt(heimatt是项目名字+6)
  - 生成项目时选择： Manually select features
  - 选择自己项目中需要用到的特性： babel、vuex、vue-router、css Pre-process、eslint
  - 是否开启 history 模式 ,选no
  - 选择一个 css 预处理器 ,选less
  - 选择 eslint 的校验时机,都选
  - 设置保存特性的位置,
  - 将以上操作保存为单独的选项
  - 设置选项的名称
  - 下载项目

注意点：

1.0 以前在使用 vue 创建项目时，只用到了 default 选项
2.0 将选好的特性保存为一个单独的选项之后：
- 这个选项会出现在

lint标准规范:

创建项目时选择的特性有：

babel：将 es6 转为 es5 的语法

Router: 在项目中使用 vue-router

Vuex：在项目中使用 Vuex

CSS Pre-processors：使用 css 预处理器

Linter：说明这个玩意儿

Linter

作用：用来规范 js 的写法。它就是一个规范
类型：
- Airbnb：爱彼迎规范
  - 是国外的一家叫 爱彼迎 的公司出产的规范
- Standard：标准规范
  - 这种规范的名字叫做 标准

Standard 具体规定：传送门

1.0 缩进使用两个空格
2.0 字符串使用单引号
3.0 句未不能以分号结尾
4.0 行首不要以 (, [ 开头
5.0 关键字后面必须加空格
6.0 函数名后面必须加空格
7.0 不要有冗余的变量
8.0 使用 === 替换 ==
9.0 使用浏览器全局变量时加上 window 前辍
10.0 注释的双斜杠后面必须加一个空格
11.0 行未千万不加空格
12.0 每个文件结束之后必须添加一个新的换行
13.0 空行不能同时存在多个

注意点：

如果错误过多，可以使用一个指令来一次性将错误全部修复：npm run lint --fix
- 这个指定有个限制：只能帮助我们修改语法错误，不能帮助我们修改代码
使用了这个 标准 规范之后，不要再使用 vscode 中的格式化快捷键

项目的运行流程:

静态页面：

public/index.html：用来显示内容
- 提供了一个 id=“App” 的容器

逻辑代码：

入口： src/main.js
- 导入了 Vue & App.vue & router & store
- 创建一个 Vue 实例：
  - 挂载了 router ： vue-router
  - 挂载了 store： vuex
  - 将 App 根组件渲染到了 Vue 实例中
  - 将 vue 实例挂载到页面上 id=“App” 的容器中
根组件： src/App.vue
- 标准的 .vue 文件：
  - template
  - script
  - style
路由： src/router.js
- 创建路由信息
仓库： src/store.js
- 创建 仓库 对象

改造项目结构:

删除不需要的文件：

将 compoents 下面的所有内容全部删除
将 views 下面的所有内容删除
将 App.vue 中的内容全部清除，只留下一个 <router-view></router-view>
将 router.js 中导入的路由文件删除，清空路由信息

添加文件夹：

api：管理所有的网络请求
style：管理所有的全局样式
utils：管理所有的自己定义工具类
router：管理路由
- 将 router.js 添加到 router 目录下，并且改名为 index.js
store：管理仓库
- 将 store.js 添加到 store 目录下，并且改名为 index.js
assets：管理所有的静态资源
components：管理全局的组件
views：管理当前项目中的页面组件

02-vant的使用:

官网传送门

使用步骤:

1.0 安装 vant ：npm i vant -S

2.0 导入组件（导入所有组件的方式）

import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'
// 使用 vant
Vue.use(Vant)

3.0 使用 vant
- 单独创建一个 .vue 文件来使用

使用 vant 中的组件：
在views下配置了一个useVant文件夹下写index.vue中,再在路由里面导入一下这个组件就可以在页面上看到这个内容

<template>
  <div>
    <h3>1.button按钮的使用</h3>
    <van-button type="default">默认按钮</van-button>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
    <h3>2.Cell 单元格的使用</h3>
    <van-cell-group>
      <van-cell title="单元格" value="内容" />
      <van-cell title="单元格" value="内容" label="描述信息" />
    </van-cell-group>
    <h3>3.Icon图标的使用</h3>
    <van-icon name="star" />
    <van-icon name="like" />
    <h3>4.插槽的使用</h3>
    <van-cell>
     <!--替换标题  -->
      <template #title>
        <van-icon name="star" />
        标题
        <van-icon name="star" />
      </template>
       <!--替换value  -->
      <template #default>
        <van-icon name="like" />
        内容
        <van-icon name="like" />
      </template>
    </van-cell>
  </div>
</template>