vue.js商城项目(一)(前期准备)

vue.js商城项目(一)(前期准备)

vue 的基础知识也学习完了,跟着视频教程做了几个小demo,想结合之前学过的node,做一个综合性的商城项目

前端开发环境搭建

1.使用vue-cli生成项目目录

打开VScode创建文件夹

  • 全局安装vue-cli,在终端里输入,npm install vue-cli -g全局安装
  • 在终端中输入 vue install,引入依赖模块
  • 在终端中输入 vue init webpack

1568534019828

国内网络不行请使用国内镜像cmpn

2.测试环境是否安装成功

  • 使用npm run dev 进行测试环境的打开。
  • 在浏览器中输入 http://localhost:8080 进行测试。

成功页

1568534068722


引入Vant组件库

vant是有赞前端团队提供的Vue组件库。

终端输入cnpm i vant -S安装

没有cnpm 直接使用淘宝源npm install 项目名 --save --registry=https://registry.npm.taobao.org

babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# 安装插件
npm i babel-plugin-import -D
// 在.babelrc 中添加配置
// 注意:webpack 1 无需设置 libraryDirectory
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}

// 对于使用 babel7 的用户,可以在 babel.config.js 中配置
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';

移动端适配

rem(font size of the root element)是相对长度单位。相对于根元素(即html元素)font-size字体大小计算值的倍数。em相对于父元素,rem相对于根元素

使用js适配,主流移动端web适配方案

1
2
3
4
5
6
//得到手机屏幕的宽度
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//得到html的Dom元素
let htmlDom = document.getElementsByTagName('html')[0];
//设置根元素字体大小,iphone678屏幕宽度375px标准375/16
htmlDom.style.fontSize = htmlWidth / 23.4375 + 'px';