新建项目
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
