通过命令行 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的更多相关文章

  1. vue.js移动端配置flexible.js

    前言 最近在用vue做移动端项目,网上找了一些移动端适配的方案,个人觉得手淘团队flexible.js还是比较容易上手,在这里做下总结. 主体 flexible.js适配方案采用rem布局,根据屏幕分 ...

  2. vue 脚手架搭建新项目以及element-ui等vue组件的使用

    vue快速搭建项目(前提是你的电脑已经安装了node的环境和vue脚手架安装,不会的自行百度) 1:打开终端: 这里说下此时位置是在User下的lijuntao文件夹下面,我一般会在桌面新建一个文件夹 ...

  3. 1.vue脚手架搭建项目

    前言: 在使用Vue-cli脚手架搭建项目之前,需要安装node.js和npm以及vue-cli. 开始搭建项目: 1.打开cmd win+R 2.转到要搭建的项目路径: g: cd Webapp/v ...

  4. 使用vue脚手架搭建项目并将px自动转化为rem

    一.安装node.js环境 二.node.js安装完成后使用npm安装vue脚手架vue-cli和安装webpack,我这里用cnpm cnpm i @vue/cli -g //全局安装脚手架3.0 ...

  5. Vue脚手架搭建项目

    全局安装vue脚手架 $ npm install -g vue-cli 卸载方法 $ npm uninstall -g vue-cli 查看vue版本(注意:大写的V) $ vue -V 创建项目 $ ...

  6. vue脚手架搭建流程

    搭建vue项目之前你需要安装vue的脚手架和node.js,一起去看看怎么搭建一个vue环境吧.(学编程语言最爱看见的就是用这个先写一个helloworld,只想说我对世界友好可是现实是残酷的.... ...

  7. VUE脚手架搭建

    1.什么vue-cli    vue-cli是vue.js的脚手架,用于自动生成vue.js工程模板的. 步骤: 2.安装   ->全局安装   npm install vue-cli -g 或 ...

  8. VUE环境搭建、创建项目、vue调试工具

    环境搭建 第一步 安装node.js 打开下载链接:   https://nodejs.org/en/download/    这里下载的是node-v6.9.2-x64.msi; 默认式的安装,默认 ...

  9. vue-cli配置移动端自适应flexible.js

    第一部分:项目中引入lib-flexible 一.项目中安装lib-flexible npm install lib-flexible --save-dev 二.在项目入口文件main.js中引入li ...

随机推荐

  1. 大前端的自动化工厂(3)—— babel

    一. 关于babel babel是ES6+语法的编译器,官方网址:www.babeljs.io,用于将旧版本浏览器无法识别的语法和特性转换成为ES5语法,使代码能够适用更多环境. 最初的babel使用 ...

  2. Docker入门(一)用hello world入门docker

    初识Docker Docker是什么?   Docker 是一个开源的应用容器引擎,基于 Go 语言并遵从Apache2.0协议开源.   Docker 可以让开发者打包他们的应用以及依赖包到一个轻量 ...

  3. [Go] 并发和并行的区别

    并发和并行的区别:1.并行是让不同的代码片段同时在不同的物理机器上运行,并行的关键是在不同的物理机器上同时运行 2.并发是同时管理很多事情,比如在一个物理机器上进行不停的调度,有些事情可能只做了一半就 ...

  4. C# 在PDF中绘制动态图章

    我们知道,动态图章,因图章中的时间.日期可以动态的生成,因而具有较强的时效性.在本篇文章中将介绍通过C#编程在PDF中绘制动态图章的方法,该方法可自动获取当前系统登录用户名.日期及时间信息并生成图章. ...

  5. Spring Boot 整合 elasticsearch

    一.简介 我们的应用经常需要添加检索功能,开源的 ElasticSearch 是目前全文搜索引擎的 首选.他可以快速的存储.搜索和分析海量数据.Spring Boot通过整合Spring Data E ...

  6. js 高级程序设计(笔记)

    第二章 1.为了避免浏览器在呈现页面时出现明显的延迟,现代Web 应用程序一般都把全部JavaScript 引用放在<body>元素中页面内容的后面. 第三章 1.ECMAScript 中 ...

  7. 把vux中的@font-face为base64格式的字体信息解码成可用的字体文件

    在最近移动端项目中用到了vux,感觉用着还习惯,当把vux使用到PC端的时候出现了IE浏览器出现,这样的错误信息: CSS3114: @font-face 未能完成 OpenType 嵌入权限检查.权 ...

  8. 震惊!Vector两行代码求逆序对,六行代码过普通平衡树

    Vector两行代码求逆序对 背景:济南集训Day7上午T2,出了一道逆序对的裸题,SB的我没看出是逆序对来,于是现场推了一个很刁钻的求逆序对的方法 首先我们想一下冒泡排序的过程,我们不难发现,对于每 ...

  9. tarjan系列算法代码小结

    个人使用,可能不是很详细 强联通分量 这里的dfn可以写成low 因为都是在栈中,只要保证该节点的low值不为本身即可 void tarjan(int now) { dfn[now]=low[now] ...

  10. windows10 企业版完整激活

    windows10 企业版完整激活 cmd管理员运行 1.  以管理员身份执行cmd命令,然后输入以下命令: slmgr.vbs /upk 由于Win10正式版允许在命令提示符界面使用"Ct ...