Vue CLI

以前喜欢用lib-flexible配合px2rem达到移动端适配的效果， 最近了解了下vw 与 vh单位，以viewport为基准，1vw 与 1vh分别为window.innerWidth 与 window.innerHeight的百分之一。 安装 命令行输入：yarn add postcss-px-to-viewport 或 npm i postcss-px-to-viewport -save -dev 配置 package.json中，在postcss中添加代码： "postcss": { "plugins": { "autoprefixer": {}, "postcss-px-to-viewport": { "viewportWidth": 750, "minPixelValue": 1 } } }, 配置项： “viewportWidth”: 750, // 设计稿的宽度 “unitPrecision”: 3, // px转成vw、vh后小数点保留的位数 “minPixelValue”: 1, // 不转化为vw的最小px值 使用场景 vw与vh会在pc与移动端均产生效果，而不像flexible只会转换一定宽度（记得是750px）以下设备的px为rem，因此若设计稿为移动端而生，全权使用vw单位会使得页面在pc端出现字体过大等现象，需酌情处理，根据应用场景自行选择 vue

lib-flexible 作用：让网页根据设备dpr和宽度，利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备 安装：yarn add lib-flexible 引入：入口文件main.js中：import 'lib-flexible/flexible.js' pxtorem 作用：将项目中css的px转成rem单位，免去计算烦恼 安装：yarn add postcss-pxtorem 配置：package.json内，在postcss内添加： "postcss": { "plugins": { "autoprefixer": {}, "postcss-pxtorem": { "rootValue": 75, // 设计稿宽度的1/10,（JSON文件中不加注释，此行注释及下行注释均删除） "propList":["*"] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部 } } }, TIPS 1、pxtorem中，对于想忽略的px写成大写即可，诸如 border:1PX solid #fff; 2、也可以选择postcss-px2rem，我更喜欢pxtorem的忽略方式，方便我vscode的beautify自动格式化代码 来源： oschina 链接： https://my.oschina

mpvue官网文档 一、安装开发环境和工具 1、安装开发环境 具体参考 《安装Node.js和npm》 。 2、安装开发工具 2.1 微信开发者工具 这个工具是开发、调试和模拟运行微信小程序的最核心的工具。 下载地址： https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 2.2 Visual Studio Code Visual Studio Code（简称vscode）是现在非常流行的一个轻量级代码编辑器，拥有非常多好用的辅助开发插件，在我的文章中我都会使用这个编辑器来编辑代码。当然，好用的代码编辑器有很多，比如Sublime Text、WebStorm等，同样可以达到我们的开发目的，你也尽管用你自己最喜欢的代码编辑器来写代码就行了。 下载地址： https://code.visualstudio.com 安装完vscode后，在它的插件管理器中，查找 Vetur 并安装，然后重启一下vscode后，插件即生效： Vetur是一款可以提供Vue语法高亮、语法检查和代码快捷输入等功能的插件，可以为我们的开发过程提供很多便利。 二、基于mpvue搭建小程序项目框架 vue-cli 是一个vue专用的项目脚手架工具，可以用于方便的创建vue项目骨架代码，包括我们要讲到的mpvue的项目代码

初始化项目的两种方式： 1、使用vuecli可以初始化项目。 在终端通过vue ui初始化。 vue ui 通过网页配置项目 创建完成后，可手动将项目导入到开发工具中（本文以WebStorm为例）。 2、通过开发工具WebStorm直接创建。（先要安装 nodejs、vuecli，安装方法可百度。） 来源： https://my.oschina.net/lzyoo/blog/3136030

1、安装cli npm install -g vue-cli 2、使用模板创建项目 vue init webpack my-project 3、查看所有模板 vue list 4、进入目录 cd my-project 5、安装依赖包 yarn install 6、最后运行项目 yarn run dev 7、打开默认界面 http://localhost:8080 来源： https://my.oschina.net/internetafei/blog/3135362

一、蓝色主题 Element ui 后台管理 Demo https://github.com/taylorchen709/vueAdmin https://taylorchen709.github.io/vueAdmin/#/user Element ui 文档 http://element.eleme.io/#/zh-CN/guide/design 二、灰色主题： vue-manage-system 基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案 ,弥补了element中缺少图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能。适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。 评价： 系统出色，界面美观，更新活跃 地址： https://github.com/lin-xin/vue-manage-system 三、灰色主题2 源码地址 https://github.com/bailicangdu/vue2-manage 效果演示 查看效果请戳这里 来源： oschina 链接： https://my.oschina.net

1、查看vue版本：vue -V 确认是否要升级 2、卸载：sudo npm uninstall vue-cli -g 或 yarn global remove vue-cli 3、安装：sudo npm install -g @vue/cli 或 yarn global add@vue/cli Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。 来源： https://my.oschina.net/lzyoo/blog/3133934

vue-cli 2.x 版本创建项目时，我们可以在 build 文件夹下找到 webpack.base.conf.js 文件，在里面修改 resolve.alias 即可。 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), } }, 但是vue-cli 3.0 创建项目时，目录结构精简化，找不到 build 和 config 文件夹，那么该如何修改路径别名呢？ 只需要在项目根目录下，新建vue.config.js文件，代码如下： const path = require('path');//引入path模块 function resolve(dir){ return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径 } module.exports={ chainWebpack:(config)=>{ config.resolve.alias //set第一个参数：设置的别名，第二个参数：设置的路径 .set('@',resolve('./src')) .set('components',resolve('./src/components')) .set(

前言 本文详细讲解了node.js压缩包版安装配置过程，配置安装时间在十分钟左右。 下载node.js 下载并解压好 node.js,本文下载的是v8.11.1 windows64位版本。 配置node与npm 1.打开NodeJs文件目录，如下图: 2.在NodeJs文件目录下建立”node_global“及”node_cache“两个文件夹 3.启动cmd，依次输入： npm config set prefix "F:\Program Files\node-v8.11.1-win-x64\node_global" npm config set cache "F:\Program Files\node-v8.11.1-win-x64\node_cache" Ps：本文nodejs地址为F:\Program Files\node-v8.11.1-win-x64 此时在cmd输入 npm root -g 出现下图则说明配置成功: 配置环境变量 1.右键‘我的电脑’依次选择‘属性’- ->‘高级系统设置’- ->‘环境变量’，看到如下界面： 2.复制nodejs目录路径(F:\Program Files\node-v8.11.1-win-x64)然后选中用户变量中的Path,单击’编辑’- ->’新建’- ->输入刚复制的地址 - ->确认完成。 重启cmd并输入

我用的新版本的 （@vue/cli）Vue CLI 3 。首先前往 github 官网 , 点击 New repository 创建新项目. 填入项目基本信息, 点击 Create Repository 确认.然后clone到本地，使用如下命令创建项目 vue create hello-world 创建好新项目之后，在跟目录新建 vue.config.js ，并添加以下内容（ 这是重点 ） module.exports = { publicPath: './', outputDir: 'docs' } 注：publicPath 加点是修改路径，预防js，css等加载不到的问题，outputDir 修改是为了能在github pages展示同时不影响vue cli创建的项目目录结构。 然后运行打包命令 npm run build 将项目push到github。 为项目（ repository）开启 github page 选项，在要展示的项目首页（路径：username/repositoryName）点击 Setting ，向下滚动找到 GitHub Pages 选项, 将 Source 改为 master branch /docs folder , 最后点击 Save 按钮。（选择 master branch /docs folder契合了前面的 outputDir 打包配置）