在使用vue create xxx 创建项目后要在文件中加入
/* jshint esversion: 6 */vue-cli
vue-cli是和vue进行深度组合的工具，可以快速帮我们创建vue项目，并且把一些脚手架相关的代码给我们创建好。真正使用vue开发项目，都是用vue-cli来创建项目的。
安装：
Vue CLI需要Node.js 8.9或更高版本 (推荐)。node环境安装后，直接通过npm install -g @vue/cli即可安装。安装完成后，输入vue --version，如果出现了版本号，说明已经下载完成。
用命令行创建项目：
- 在指定路径下使用
vue create [项目名称]创建项目。 - 会让你选择要安装哪些包(默认是
Babel和ESLint)，也可以手动选择。 - 如果在安装的时候比较慢，可以在安装的时候使用淘宝的链接：
vue create -r [项目名称]。 - 如果实在不想在创建项目的时候都指定淘宝链接，可以在当前用户目录下，找到
.npmrc，然后设置registry=。
用界面创建项目：
- 打开
cmd，进入到你项目存储的路径下。然后执行vue ui，就会自动打开一个浏览器界面。 - 按照指引进行选择，然后一顿下一步即可创建。
项目结构介绍：
node_modules：本地安装的包的文件夹。public：项目出口文件。src：项目源文件：assets：资源文件，包括字体，图片等。components：组件文件。：入口组件。：webpack在打包的时候的入口文件。
：es*转低级js语言的配置文件。：项目包管理文件。
组件定义和导入：
- 定义：组件定义跟之前的方式是一模一样的。只不过现在模板代码专门放到
.vue的template标签中，所以不再需要在定义组件的时候传入template参数。另外，因为需要让别的组件使用本组件，因此需要用export default将组件对象进行导出。 - 导入：因为现在组件是在不同的文件中。所以如果需要引用，那么必须进行导入。用
ES6语法的import XXX from XXX。
局部样式：
默认情况下在.vue文件中的样式一旦写了，那么会变成全局的。如果只是想要在当前的组件中起作用，那么可以在style中加上一个scoped属性即可。示例代码如下：
<style scoped>.info{ background-color: red; } </style> 使用sass语法：
很多小伙伴在写样式代码的时候，不喜欢用原生css，比较喜欢用比如sass或者less，这里我们以sass为例，我们可以通过以下两个步骤来实现：
- 安装
loader：webpack在解析scss文件的时候，会去加载sass-loader以及node-loader，因此我们首先需要通过npm来安装一下：npm install node-sass@4.12.0 --save-devnpm install sass-loader@7.0.3 --save-dev
指定sass语言：在指定style的时候，添加lang="scss"属性，这样就会将style中的代码识别为scss语法。
rem移动端适配：
在移动端(手机端、Pad端)，设备尺寸参差不齐。如果想要写完一套代码，能够在所有移动设备上都正常运行，那么采用原生的px单位来设置是不行的。举个例子：iPhone6的尺寸是375px，如果我们想要一个盒子是占据整个宽度的一半，那么会将这个盒子的宽度设置为，但是并不是所有手机的宽度都是375px，因此就会造成问题。这时候我们可以通过rem来解决这个问题。
什么是rem：
em：当前元素字体大小相对于父标签的字体大小。比如：<div style="font-size:16px;"><span style="font-size:2em">你好</span> </div>div中字体大小是16px，而在span标签中因为用的是2em，因此是2倍的父标签字体的大小，也就是32px。rem：跟em类似，只不过此时的参照元素不是父元素，而是根元素，也就是html元素的大小。比如：<html style="font-size:14px"><div style="font-size:16px;"> <span style="font-size:2rem">你好</span> </div> </html>span标签字体大小为html标签字体大小的2倍，也就是28px。
rem适配原理：
rem虽然本身是用来设置字体的大小，但是也可以延伸到设置其他属性的尺寸。利用rem我们可以实现等比缩放。比如设计师给的UI设计图是按照750px尺寸的，我们可以给html的font-size为100px，那么以后我想实现一个32px的大小，转化成rem就是。这样写是没有问题的，但是如果用户现在的手机不是750px的，而是375px的，这时候直接写个不是会有问题吗？目前这样来说是有问题，但是我们只需要设置html的font-size为windowWidth/750*100，在这个公式中将windowWidth换算成375px，结果为50px，那么用后的px为16px，正好是750px尺寸的一半，达到了缩小一倍的效果。
在Vue-cli中实现rem布局：
在使用vue-cli创建的项目中，我们可以通过一些第三方包来方便的实现rem的布局。要安装两个包，分别是：postcss-pxtorem、lib-flexible。安装命令通过npm install --save-dev postcss-pxtorem lib-flexible安装即可。在安装完包后，还需要配置两个地方：
："postcss": {"plugins": {"autoprefixer": {},"postcss-pxtorem": {"rootValue": ,"propList": ["*"],"selectorBlackList": ["van-*"]}}}
：import "lib-flexible"这样以后在写单位的时候，就不需要换算成rem，直接写px就可以，postcss-pxtorem会自动的将我们写的px转化成rem。而lib-flexible会根据当前的尺寸，来调整html上的font-size进行适配。而其中的则根据设计师设计图的尺寸来，比如设计师是用375px的尺寸来设计的，那么就是375/10。
vant组件库使用
vant库是有赞公司前端团队开源的一款针对vue库的组件库。里面集成了很多移动端用到的组件，包括按钮、图片、Icon图标等。而且因为有赞是一个做微商城的公司，所以有很多微商城的组件比如地址列表、商品卡片、优惠券等组件。
安装：
引入组件：
自动按需引入组件 (推荐)
babel-plugin-import是一款babel插件，它会在编译过程中将import的写法自动转换为按需引入的方式
module.exports = {plugins: [['import', {libraryName: 'vant',libraryDirectory: 'es',style: true}, 'vant']] }; 导入所有组件：
Vant支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法
import Vue from 'vue';
import Vant from 'vant'; import 'vant/lib/'; (Vant);Vue项目启动
Local本地地址
Network是你的局域网地址
![浏览器打开出现证书错误_证书错误IE所有HTTPS网站都打不开[解决]](https://img-blog.csdnimg.cn/img_convert/7e1ad62c57e947e73b5fd7c7cb00d194.png)
![php网站缩略图,如何使用PHP对网站进行缩略图截图?[关闭]](https://i.stack.imgur.com/Vw3Ve.jpg)
