【vue3.0】1.0 某东到家(一)——实战项目项目开发

新建项目

win+R
> cmd
> cd F:\workspace\vue_workspace\moudong_go_home_workspace
> vue create moudong_go_home

image.png

必备插件：

image.png

启动命令：

npm run serve

vs code必备插件

eslint:编码语法规范
vetur：识别vue语法，高亮vue代码

生成目录的项目结构

• node_modules:第三方插件、依赖
  -public：
  --favicon.ico 浏览器标题栏缩略图图标
  --index.html项目真实首页
  -.editorconfig 编辑器的默认配置
  -babel.config.js vue中用到的babel的配置
  其中：

public/favicon.ico 用法演示也在index.html中

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

editorconfig

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
# 两个空格作为tab的间距
indent_size = 2
trim_trailing_whitespace = true
#每个文件最后创建新的一行
insert_final_newline = true

babel.config.js

第一次创建会有vue自带的默认的插件集。

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

还有其他的文件夹暂不做介绍。

基础CSS安装和配置

不同的移动端的展示不一致，这时候需要安装一个文件，用来抹平不同浏览器之间的差异。

npm install normalize.css --save

image.png

当前安装版本为8.0.1.

修改main.js，引入：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'normalize.css'

createApp(App).use(store).use(router).mount('#app')

创建文件夹src\style，在里面创建一个base.scss的文件：

html{
  font-size: 100px;
}

为什么这么做，因为在其他标签的编写中，将使用rem的单位。这样的设定是为了实现rem转换为px的限制：

1rem=100px(像素)

修改main.js，引入：

import {
  createApp
} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'normalize.css'
import './style/base.scss'

createApp(App).use(store).use(router).mount('#app')

运行，会发现显示特别大：

image.png

底部docker开发

修改app.vue

<template>
  <div class="docker"></div>
  <router-view />
</template>

<style lang="scss">
.docker {
  position: absolute; //绝对定位
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.49rem;
  border-top: 1px solid #f1f1f1;
}
</style>

为了显示这里修改一下路由：
src\router\index.js

const routes = [{
  path: '/',
  name: ''
},
{
  path: '/home',
  name: '',
  component: Home
},
{
  path: '/about',
  name: 'About',
  // route level code-splitting
  // this generates a separate chunk (about.[hash].js) for this route
  // which is lazy-loaded when the route is visited.
  component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]

image.png

可以看到最底下有一道细细的横线。
修改app.vue

<template>
  <div class="docker">
    <span class="docker__item">首页</span>
    <span class="docker__item">购物车</span>
    <span class="docker__item">订单</span>
    <span class="docker__item">我的</span>
  </div>
  <router-view />
</template>

<style lang="scss">
.docker {
  display: flex; //自适应均赠,弹性盒子
  position: absolute; //绝对定位
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.49rem;
  border-top: 1px solid #f1f1f1;
}
.docker__item {
  flex: 1;
}
</style>

显示如下：

image.png

字体特别大，需要修改一下base.scss:

html{
  font-size: 100px;
}
body{
  font-size: .12rem;
}

效果如下：

image.png

现在需要文字居中：

.docker__item {
  flex: 1;
  text-align: center;
}

为了左右留出空格，修改：

.docker {
  display: flex; //自适应均赠,弹性盒子
  position: absolute; //绝对定位
  box-sizing: border-box;//这个会以body的最外层作为容器的最外层
  padding: 0 .18rem;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.49rem;
  border-top: 1px solid #f1f1f1;
}

当前效果如下：

image.png