利用vue-cli(脚手架)一步一步构建一个仿当当网项目

项目图

开发环境的搭建

这里我就不多叙述了，直接看我的这个文章有详细步骤 vue项目构建步骤

开发环境统一化

用一个插件 ESLint 我用的是vscode，所以就直接在插件里面下载了。
项目中已经自动安装了，所以不用给项目添加依赖了。
安装完插件后需要在，vscode中的首选项设置中的 settings.json中添加设置

 "editor.tabSize": 2,//设置按tab键等于两个空格"eslint.autoFixOnSave": true, // 保存自动格式化代码"eslint.validate": [//作用的文件类型"javascript","javascriptreact",{"language": "html","autoFix": true},{"language": "vue","autoFix": true},],"editor.fontSize": 16//设置编辑环境字体大小

这样环境就可以统一化了。

清空项目中已有信息

先把App.vue（主路由页面清空）以后App.vue文件称为主路由

<template><div id="app"><router-view/></div>
</template>

再把子路由清空

<template><div class="hello">HelloWorld</div>
</template>

设置主页面的style属性

为了清除默认的一些值，如padding margin 等等的，也为了模块化，我就在
在 src下新建一个文件夹css，新建文件 reset.css，
reset.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
vertical-align: baseline;
}/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, menu, nav, section {
display: block;
}body {
line-height: 1;
}blockquote, q {
quotes: none;
}blockquote:before, blockquote:after,
q:before, q:after {
content: none;
}table {
border-collapse: collapse;
border-spacing: 0;
}/* custom */
a {
color: #7e8c8d;
text-decoration: none;
-webkit-backface-visibility: hidden;
}li {
list-style: none;
}::-webkit-scrollbar {
width: 5px;
height: 5px;
}::-webkit-scrollbar-track-piece {
background-color: rgba(0, 0, 0, 0.2);
-webkit-border-radius: 6px;
}::-webkit-scrollbar-thumb:vertical {
height: 5px;
background-color: rgba(125, 125, 125, 0.7);
-webkit-border-radius: 6px;
}::-webkit-scrollbar-thumb:horizontal {
width: 5px;
background-color: rgba(125, 125, 125, 0.7);
-webkit-border-radius: 6px;
}html, body {
width: 100%;
}body {
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

然后在主路由的style中导入文件

<style>
@import url('./css/reset.css');
</style>

这样你就可以在控制的的computed中原有的属性清零了。

下部导航子路由的设置

我们就在componens中新建文件 home，home下新建一个index.vue

<template><div>首页</div>
</template>
<script>
export default {}
</script>

在router路由文件中修改index.js路由文件为

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/home/index.vue'Vue.use(Router)export default new Router({routes: [{path: '/Home',name: 'Home',component: Home}]
})

现在你打开项目。在地址中输入Hone就可以看看到首页两个字了。
剩下的几个子路由同理

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/home/index.vue'
import Cart from '@/components/cart/cart.vue'
import List from '@/components/list/list.vue'
import Shop from '@/components/shop/shop.vue'
import MyCenter from '@/components/myCenter/myCenter.vue'Vue.use(Router)export default new Router({routes: [{path: '/Home',name: 'Home',component: Home},{path: '/Cart',name: 'Cart',component: Cart},{path: '/List',name: 'List',component: List},{path: '/Shop',name: 'Shop',component: Shop},{path: '/MyCenter',name: 'MyCenter',component: MyCenter}]
})

子路由的父路由

在src目录下新建base文件夹，在文件夹下新建 base.vue，里面写上路由列表

<template><div class="nav"><ul><li><i></i><span>首页</span></li><li><i></i><span>分类</span></li><li><i></i><span>值得买</span></li><li><i></i><span>购物车</span></li><li><i></i><span>我的当当</span></li></ul></div>
</template>
<script>
export default {}
</script>
<style scoped>
.nav{position: fixed;bottom: 0;left: 0;width: 100%;
}
.nav ul{padding: 5px;display: flex;background: #fcfcfc
}
.nav ul li{display: flex;flex: 1;height: 46px;justify-content: center;flex-direction: column;text-align: center;
}
</style>

现在项目的模样

激活状态样式设置

在路由文件（router）里的index.js中添加一个修改激活状态样式名的属性

export default new Router({linkActiveClass: 'active',）}

这样就可以用active这个样式名，而不用路由自带的那个长串了。

顶部的搜索框

由于这个搜索框是在首页里面独有的，所有在就home中写
在home文件中创建search，再创建 search.vue，里面写页面模板

<template><div class="search"><a href="" class="log">这是log</a><div class="inp"><i>这是搜索按钮</i><input type="text" name="" id=""></div><i>列表</i></div>
</template>
<script>
export default {}
</script>
<style scoped>
.search{display: flex;justify-content: space-between;
}
.search .log{width: 30px;height: 30px;
}
.inp{position: relative;
}
.inp i{position: absolute;top: 0;left: 5px;display: block;background: red;width: 25px;height: 25px;float: left;
}
.inp input{height: 25px;border-radius: 15px;background: #e8ecf0;
}</style>

模板写好后，就在index.vue中注册一下。

<template><div>首页<!-- 搜索框 --><Search></Search></div>
</template>
<script>
import Search from './search/search.vue'
export default {components: {Search}
}
</script>

手淘适配

为了使网页在每一个设备上都一样不发生改变。另一个响应式布局是根据每个设备的大小去响应不一样的布局，如bootstrap，就是用到响应式布局，说远了。来直接干手淘适配

ib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem

安装包

cnpm install lib-flexible --save

然后在 main.js中导入包

import 'lib-flexible'

** 注意 ** :如果你首页中有meta name="viewport"的标签需要注释掉，不然会使用默认的 3. 将px自动转换rem单位

安装包
将px 渲染时转为rem单位

npm install px2rem-loader --save-dev

配置
配置px2rem-loader

打开build/utils.js文件，找到exports.cssLoaders方法，在里面添加如下代码

const px2remLoader = {loader: 'px2rem-loader',options: {remUint: 75}}

2.修改generateLoaders方法中的loaders

// 注释掉这一行
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
// 修改为
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

将之前的样式都*2，就可以正常显示了。

顶部搜索框

最终顶部样式

首页的内容swiper

既然里面内容是从服务器拿的，所以我们也建个服务器。

express ddserver

这样服务器就有了。（不懂的可以去看看我这个文章） node脚手架生成服务器
在routes中新建一个api.js
里面接收这样的请求

var express = require('express');
var router = express.Router();/* GET users listing. */
router.get('/getSwipe', function(req, res, next) {var arr = ['http://img61.ddimg.cn/upload_img/00670/lz/1242x366jdthh-1566298387.jpg','http://img63.ddimg.cn/upload_img/00803/1/1242x36601_dl_0819-1566202031.jpg','http://img59.ddimg.cn/214240057211059_y.jpg','http://img60.ddimg.cn/upload_img/00796/ts0820_0821/1242x366-1566207854.jpg','http://img62.ddimg.cn/upload_img/00271/EGISOO05/1242-366-1566286788.jpg','http://img54.ddimg.cn/220150073436964_y.jpg']res.send(arr);
});module.exports = router;

在app.js中添加这两句

var ddapiRouter = require('./routes/api')
app.use('/ddapi', ddapiRouter);

还要配置一下跨域问题。
我就直接用cors 这个库，

cnpm i cors -D

配置
这两句写在app.js中
var cors = require(‘cors’)
app.use(cors())

接下来，你在地址连输入http://127.0.0.1:3000/ddapi/getSwipe。
就能看到你的数据了。
你们更改完了，需要重新启动服务器才行。我这里就用了nodemon去监听代码自动重启了。

轮播图

我们就直接使用Swipe，

安装

npm install vue-awesome-swiper --save

写模板页
和搜索框相同，在home目录下，新建myswiper文件夹，新建swiper.vue文件

<template><swiper :options="swiperOption"><swiper-slide v-for="(slide, index) in swiperSlides" :key="index"><img :src="slide" alt=""></swiper-slide><div class="swiper-pagination" slot="pagination"></div></swiper>
</template><script>
export default {name: 'carrousel',created () {},data () {return {swiperOption: {pagination: {el: '.swiper-pagination'}},swiperSlides: []}},mounted () {}
}
</script>

现在就可以发送请求，获取数据了，

我们直接在myswiper.vue中的create函数中写

getSlide().then(data => {//我把axios做了一层封装。 函数返回的是axios.get（‘getSwipe’）console.log(data)this.swiperSlides = data.data})

这里有一个比较适合新手的项目，我就直接放上来了，欢迎大家stat，评论收藏转发，评论，谢谢了
Vancl官网项目，