目录
项目初始化
一、项目初始化
更新日期:2020-05-11 19:36:21
使用 Vue CLI 创建项目
如果你还没有安装 VueCLI,请执行下面的命令安装或是升级:
npm install --global @vue/cli
在命令行中输入以下命令创建 Vue 项目:
vue create toutiao-m
Vue CLI v4.3.1
? Please pick a preset:
default (babel, eslint)
Manually select features
default:默认勾选 babel、eslint,回车之后直接进入装包
manually:自定义勾选特性配置,选择完毕之后,才会进入装包
选择第 2 种:手动选择特性,支持更多自定义选项
? Please pick a preset: Manually select features
? Check the features needed for your project:
() Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
() Router
() Vuex
() CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
分别选择:
Babel:es6 转 es5
Router:路由
Vuex:数据容器,存储共享数据
CSS Pre-processors:CSS 预处理器,后面会提示你选择 less、sass、stylus 等
Linter / Formatter:代码格式校验
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
是否使用 history 路由模式,这种模式兼容不好,所以这里输入 n 不使用
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
选择 CSS 预处理器,这里选择我们熟悉的 Less
? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
选择校验工具,这里选择 ESLint + Standard config
? Pick additional lint features:
(*) Lint on save
(*) Lint and fix on commit
选择在什么时机下触发代码格式校验:
Lint on save:每当保存文件的时候
Lint and fix on commit:每当执行 git commit 提交的时候
这里建议两个都选上,更严谨。
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
In dedicated config files
In package.json
Babel、ESLint 等工具会有一些额外的配置文件,这里的意思是问你将这些工具相关的配置文件写到哪里:
In dedicated config files:分别保存到单独的配置文件
In package.json:保存到 package.json 文件中
这里建议选择第 1 个,保存到单独的配置文件,这样方便我们做自定义配置。
? Save this as a preset for future projects? (y/N) N
这里里是问你是否需要将刚才选择的一系列配置保存起来,然后它可以帮你记住上面的一系列选择,以便下次直接重用。
这里根据自己需要输入 y 或者 n,我这里输入 n 不需要。
✨ Creating project in C:\Users\LPZ\Desktop\topline-m.
� Initializing git repository…
⚙ Installing CLI plugins. This might take a while…
[ …] - extract:object-keys: sill extract json5@2.1.1
向导配置结束,开始装包。 安装包的时间可能较长,请耐心等待…
⚓ Running completion hooks…
� Generating README.md…
� Successfully created project topline-m-89.
� Get started with the following commands:
$ cd topline-m
$ npm run serve
安装结束,命令提示你项目创建成功,按照命令行的提示在终端中分别输入:
目录结构
├── node_modules 第三方包存储目录
├── public 任何放置在 public 文件夹的静态资源都会被简单的复制,而不经过 webpack。
│ ├── favicon.ico 浏览器收藏夹图标
│ └── index.html 单页面 HTML 文件
├── src
│ ├── assets 公共资源目录,放图片等资源
│ ├── components 公共组件目录
│ ├── router Vue Router 路由模块
│ ├── store Vue 容器模块
│ ├── views 视图组件存储目录,所有的路由页面都存储到这里
│ ├── App.vue 根组件,最终被替换渲染到 index.html 页面中 #app 入口节点
│ └── main.js 整个项目的启动入口模块
├── .browserslistrc 指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀
├── .editorconfig EditorConfig 帮助开发人员定义和维护跨编辑器(或IDE)的统一的代码风格,详情参考这里:https://editorconfig.org/。
├── .eslintrc.js ESLint 的配置文件
├── .gitignore Git 的忽略配置文件,告诉Git项目中要忽略的文件或文件夹
├── README.md 说明文档
├── babel.config.js Babel 的配置文件
├── package-lock.json 记录安装时的包的版本号,以保证自己或其他人在 npm install 时大家的依赖能保证一致
└── package.json 包说明文件,记录了项目中使用到的第三方包依赖信息等内容
添加的东西
创建以下内容:
src/api 目录,存储接口封装
src/utils 目录,存储一些工具模块
src/styles 目录,存储样式资源
index.less 文件,存储全局样式
在 main.js 中加载全局样式 import ‘./styles/index.less’
vant按需导入
按需引入下载插件和配置插件
npm i babel-plugin-import -D
- 配置:``
// 对于使用 babel7 的用户,可以在 babel.config.js 中配置
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}
vant.js插件的按需引入
- 在项目的根目录下,创建一个文件夹 pulgins/vant.js
import Vue from 'vue'
import { Button } from 'vant'
Vue.use(Button)
- 然后在入库文件中引入插件 main.js
// 引入vant UI框架
import './plugins/vant'
适配
vw布局
1vw == 视口的宽度 1% 100vw == 100%
1vh == 视口的高度 1% 100vh == 100%
设计图为640px 750px 1080px
其中dpr为2 2 3
假如设计为750px为例子:
那么750 / 2 = 375px ---也就是调试窗口看到逻辑像素--也就是视口完整为375px
所以啊 375px = 100vw
推出 100px = 26.67vw (给html设置为26.67vw也就是100px,为何不直接,因为vw可变,px直接固定了)
因此需要把750px设计图为标准,给html的文字大小设置为26,67vw(也就是100px),那么在375px的调试窗口下显示的88px(ps量取的)下为44px,在320px之中,显得小一些,在比375px大的显得大一些,这就是所谓的适配。
那么640的设计图时候
640px / 2 = 320 px;
100 vw = 320px;
最后推出==》 100px = 31.25vw
由于rem的值是 1rem = html文字大小的值(这边设置的100px = 31.25vw)
那么也就是说,你在ps量取到的值假如为88px drp为2
88px / 2 = 44px
44px / 100 = 0.44rem;
- 给html设置大小 之后根据ps量取的像素 在求出相对应的 rem
html {
font-size: 26.67vw;
}
header {
height: 0.44rem;
background: yellow;
}
rem布局
一、安装适配
- 安装
npm i amfe-flexible
- 在main.js引入
import 'amfe-flexible
- 然后在html之中显示这个即可!(这是苹果 6 7 8 )
style="font-size: 37.5px
- 在app.vue中引入
<style lang="scss">
@import './style/common.scss';
</style>
二、使用 postcss-pxtorem 将 px 转为 rem
- 1、安装
npm install postcss-pxtorem -D
- 2、然后在项目根目录中创建 postcss.config.js 文件
复制代码
module.exports = {
plugins: {
"postcss-pxtorem": {
// 设计稿 375:37.5
// 设计稿:750:75
// Vant 是基于 375
rootValue: 37.5,
propList: ["*"]
}
}
}
- 3、配置完毕,重新启动服务
最后测试:在浏览器中审查元素的样式查看是否已将 px 转换为 rem。
注意: .只能转换单独的 .css|.less|.scss 之类的文件、.vue 文件中的 style 中的 px
最后引入重置样式表
#app这个对样式的重置,字体大小为16px,还有字体不加粗,字体颜色等!
移动端对meta标签的设置
- 在项目的
publick/index.html
或者 index.html文件下设置meta标签
<meta charset="utf-8"> 声明文档使用的字符编码
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 优先使用 IE 最新版本和 Chrome
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,minimal-ui"> 为移动设备添加 viewport
<meta name="screen-orientation" content="portrait"> uc强制竖屏
<meta name="format-detection" content="telephone=no"> 避免吧数字识别为手机号码
<meta name="full-screen" content="yes"> UC强制全屏
<meta name="x5-fullscreen" content="true"> QQ强制全屏
更多详情 请参考: https://www.cnblogs.com/sysg/p/6541686.html
链接: link.
服务器代理 & 请求拦截
服务器代理 vue.config.js文件
- 转载:链接: link.
// 假设要请求的接口是:http://40.00.100.100:3002/api/user/add
module.exports = {
devServer:{
host:'localhost', // 本地主机
port:5000, // 端口号的配置
open:true, // 自动打开浏览器
proxy:{
'/api': { // 拦截以 /api 开头的接口
target: 'http://40.00.100.100:3002',//设置你调用的接口域名和端口号 别忘了加http
changeOrigin: true, //这里true表示实现跨域
secure: false, // 如果是https接口,需要配置这个参数
pathRewrite: {
'^/api':'/' //这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/api/user/add',直接写‘/api/user/add’即可
}
},
// 假如又有一个接口是:http://40.00.100.100:3002/get/list/add
// 那就再配置一个 get的,如下:
'/get': { // 拦截以 /get 开头的接口
target: 'http://40.00.100.100:3002',//设置你调用的接口域名和端口号 别忘了加http
changeOrigin: true, //这里true表示实现跨域
secure: false, // 如果是https接口,需要配置这个参数
pathRewrite: {
'^/api':'/' //这里理解成用‘/api’代替target里面的地址,
}
}
// 调用的时候直接 /get/list/add 就可以了
}
}
}
// 注意:修改了配置文件后一定要重启才会生效;