vue脚手架搭建移动端项目--flexible.js
通过命令行 node -v 查看是否安装node环境
在 nodejs 和 webpack已安装的前提下,随便一个文件夹下,输入命令行
npm install vue-cli -g
安装完成后,通过 vue -V 查看版本号验证是否安装成功
通过vue-cli 初始化vue项目
输入命令行新建 vue-demo 项目
vue init webpack vue-demo(项目名)
然后就可以一路回车键了
$ vue init webpack vue-demo ? Project name (vue-demo)
? Project name vue-demo
? Project description (A Vue.js project)
? Project description A Vue.js project
? Author (xxx <xxx@123.com>)
? Author xxx<xxx@123.com>
? Vue build standalone
? Install vue-router? (Y/n) y
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n //是否使用ESLint管理代码
? Use ESLint to lint your code? No
? Set up unit tests (Y/n) n
? Set up unit tests No
? Setup e2e tests with Nightwatch? (Y/n) n
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
? Should we run `npm install` for you after the project has been created? (recom
mended) npm vue-cli · Generated "vue-demo". # Installing project dependencies ...
# ========================
ESLint的用途:
- 1.审查代码是否符合编码规范和统一的代码风格;
- 2.审查代码是否存在语法错误;
在项目中使用 ESLint 总是会报各种错误,所以开发的时候我一般是不开启的
安装完成后,会显示
# Project initialization finished!
# ======================== To get started: cd vue-demo
npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack
这时如果直接运行 npm run dev 会报错,需要再安装项目依赖
进入到 vue-demo 文件夹下,执行命令行
cd vue-demo
npm install(或者是cnpm install)
执行完成后,在 vue-demo 文件夹下新增 node_modules 文件
启动服务,执行命令行
$ npm run dev
> vue-demo@1.0.0 dev E:\mytest\vuetest\vue-demo
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 95% emitting DONE Compiled successfully in 3868ms15:24:20 I Your application is running here: http://localhost:8081
在浏览器中输入 localhost:8081 访问页面,如果想要自动启动浏览器页面,需要在 config/index.js文件中修改相关配置
module.exports = {
dev: { // Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {}, // Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true,//是否自动启动浏览器
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
修改autoOpenBrowser:true,
Ctrl+C 退出服务后再启动 npm run dev 就可以自动打开网页
运行流程:
补充一点:添加 favicon.ico 图标
https://blog.csdn.net/guzhao593/article/details/93972303
标签页图标favicon报错问题
1.修改配置 build/webpack.dev.conf.js
var path = require('path')
module.exports = merge(baseWebpackConfig, {
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
favicon: 'favicon.ico' // 增加
}),
]
})
2.favicon.ico 存放根目录 3.index.html引入路径
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
适配移动端flexible.js
适用于最新版vue-cli,配置手淘的lib-flexible.js和rem实现移动端页面自适应
1.安装lib-flexible.js
npm install lib-flexible --save
2.在项目入口文件main.js中引入lib-flexible
import 'lib-flexible/flexible.js'
3.px转换rem
使用 webpack 的 px2rem-loader,自动将px转换为rem
安装px2rem-loader
npm install px2rem-loader --save-dev
4.配置px2rem-loader
首先找到 build/utils.js文件,在utils.js中添加如下配置
找到generateLoaders方法,在函数里如下配置
这里最重要的就是要在上图两个位置都要加上px2remLoader,不然不会起作用!!!
5.px2rem 用法
安装px2rem后,再使用px上有些不同,大家可以参考px2rem官方介绍,下面简单介绍一下。
- 直接写px,编译后会直接转化成rem —- 除开下面两种情况,其他长度用这个
- 在px后面添加/no/,不会转化px,会原样输出。 — 一般border需用这个
- 在px后面添加/px/,会根据dpr的不同,生成三套代码。—- 一般字体需用这个
示例代码
编译前(自己写的代码)
.example{
width: 150px;
height: 64px; /*px*/
font-size: 28px; /*px*/
border: 1px solid #ddd; /*no*/
}
编译后
.example{
width: 2rem;
border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
height: 32px;
font-size: 14px;
}
[data-dpr="2"] .selector {
height: 64px;
font-size: 28px;
}
[data-dpr="3"] .selector {
height: 96px;
font-size: 42px;
}
这样基本配置就完成了,重启项目就可以使用lib-flexible+rem编写移动端页面了
注意:vue移动端 border 或分割线中的 1px 不希望被转成 rem,只要再后面写上注释 /*no*/ 就可以了
参见:https://blog.csdn.net/Coding_Jia/article/details/78866220
npm相关
npm -v
:查看 npm 版本。npm list
:查看当前目录下都安装了哪些 npm 包。npm info 模块
:查看该模块的版本及内容。npm i 模块@版本号
:安装该模块的指定版本。
在平时使用 npm 安装包的过程中,你可能需要知道一些 npm 基本知识:
i
/install
:安装。使用install
或者它的简写i
,都表明你想要下载这个包。uninstall
:卸载。如果你发现这个模块你已经不使用了,那么可以通过uninstall
卸载它。g
:全局安装。表明这个包将安装到你的计算机中,你可以在计算机任何一个位置使用它。--save
/-S
:通过该种方式安装的包的名称及版本号会出现在package.json
中的dependencies
中。dependencies
是需要发布在生成环境的。例如:ElementUI
是部署后还需要的,所以通过-S
形式来安装。--save-dev
/-D
:通过该种方式安装的包的名称及版本号会出现在package.json
中的devDependencies
中。devDependencies
只在开发环境使用。例如:gulp
只是用来压缩代码、打包的工具,程序运行时并不需要,所以通过-D
形式来安装。
vue脚手架搭建移动端项目--flexible.js的更多相关文章
- vue.js移动端配置flexible.js
前言 最近在用vue做移动端项目,网上找了一些移动端适配的方案,个人觉得手淘团队flexible.js还是比较容易上手,在这里做下总结. 主体 flexible.js适配方案采用rem布局,根据屏幕分 ...
- vue 脚手架搭建新项目以及element-ui等vue组件的使用
vue快速搭建项目(前提是你的电脑已经安装了node的环境和vue脚手架安装,不会的自行百度) 1:打开终端: 这里说下此时位置是在User下的lijuntao文件夹下面,我一般会在桌面新建一个文件夹 ...
- 1.vue脚手架搭建项目
前言: 在使用Vue-cli脚手架搭建项目之前,需要安装node.js和npm以及vue-cli. 开始搭建项目: 1.打开cmd win+R 2.转到要搭建的项目路径: g: cd Webapp/v ...
- 使用vue脚手架搭建项目并将px自动转化为rem
一.安装node.js环境 二.node.js安装完成后使用npm安装vue脚手架vue-cli和安装webpack,我这里用cnpm cnpm i @vue/cli -g //全局安装脚手架3.0 ...
- Vue脚手架搭建项目
全局安装vue脚手架 $ npm install -g vue-cli 卸载方法 $ npm uninstall -g vue-cli 查看vue版本(注意:大写的V) $ vue -V 创建项目 $ ...
- vue脚手架搭建流程
搭建vue项目之前你需要安装vue的脚手架和node.js,一起去看看怎么搭建一个vue环境吧.(学编程语言最爱看见的就是用这个先写一个helloworld,只想说我对世界友好可是现实是残酷的.... ...
- VUE脚手架搭建
1.什么vue-cli vue-cli是vue.js的脚手架,用于自动生成vue.js工程模板的. 步骤: 2.安装 ->全局安装 npm install vue-cli -g 或 ...
- VUE环境搭建、创建项目、vue调试工具
环境搭建 第一步 安装node.js 打开下载链接: https://nodejs.org/en/download/ 这里下载的是node-v6.9.2-x64.msi; 默认式的安装,默认 ...
- vue-cli配置移动端自适应flexible.js
第一部分:项目中引入lib-flexible 一.项目中安装lib-flexible npm install lib-flexible --save-dev 二.在项目入口文件main.js中引入li ...
随机推荐
- 大前端的自动化工厂(3)—— babel
一. 关于babel babel是ES6+语法的编译器,官方网址:www.babeljs.io,用于将旧版本浏览器无法识别的语法和特性转换成为ES5语法,使代码能够适用更多环境. 最初的babel使用 ...
- Docker入门(一)用hello world入门docker
初识Docker Docker是什么? Docker 是一个开源的应用容器引擎,基于 Go 语言并遵从Apache2.0协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量 ...
- [Go] 并发和并行的区别
并发和并行的区别:1.并行是让不同的代码片段同时在不同的物理机器上运行,并行的关键是在不同的物理机器上同时运行 2.并发是同时管理很多事情,比如在一个物理机器上进行不停的调度,有些事情可能只做了一半就 ...
- C# 在PDF中绘制动态图章
我们知道,动态图章,因图章中的时间.日期可以动态的生成,因而具有较强的时效性.在本篇文章中将介绍通过C#编程在PDF中绘制动态图章的方法,该方法可自动获取当前系统登录用户名.日期及时间信息并生成图章. ...
- Spring Boot 整合 elasticsearch
一.简介 我们的应用经常需要添加检索功能,开源的 ElasticSearch 是目前全文搜索引擎的 首选.他可以快速的存储.搜索和分析海量数据.Spring Boot通过整合Spring Data E ...
- js 高级程序设计(笔记)
第二章 1.为了避免浏览器在呈现页面时出现明显的延迟,现代Web 应用程序一般都把全部JavaScript 引用放在<body>元素中页面内容的后面. 第三章 1.ECMAScript 中 ...
- 把vux中的@font-face为base64格式的字体信息解码成可用的字体文件
在最近移动端项目中用到了vux,感觉用着还习惯,当把vux使用到PC端的时候出现了IE浏览器出现,这样的错误信息: CSS3114: @font-face 未能完成 OpenType 嵌入权限检查.权 ...
- 震惊!Vector两行代码求逆序对,六行代码过普通平衡树
Vector两行代码求逆序对 背景:济南集训Day7上午T2,出了一道逆序对的裸题,SB的我没看出是逆序对来,于是现场推了一个很刁钻的求逆序对的方法 首先我们想一下冒泡排序的过程,我们不难发现,对于每 ...
- tarjan系列算法代码小结
个人使用,可能不是很详细 强联通分量 这里的dfn可以写成low 因为都是在栈中,只要保证该节点的low值不为本身即可 void tarjan(int now) { dfn[now]=low[now] ...
- windows10 企业版完整激活
windows10 企业版完整激活 cmd管理员运行 1. 以管理员身份执行cmd命令,然后输入以下命令: slmgr.vbs /upk 由于Win10正式版允许在命令提示符界面使用"Ct ...