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

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.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>
       
      <template #default>
        <van-icon name="like" />
        内容
        <van-icon name="like" />
      template>
    van-cell>
  div>
template>

出来效果:

vant - vant 中的插槽:

如果需要在 cell（单元格之内添加其它的图标），必须使用插槽,上面代码有写.

总结：

• 将要使用插槽的组件，从单标签改为双标签
• 添加一个容器 template
• 给 template 添加插槽的属性: #title & #default
• 在 template 标签之中添加内容