vue 写门户网站_vue 美团项目初始化 - 一文g

最新推荐文章于 2024-09-08 21:09:54 发布

weixin_39622628

最新推荐文章于 2024-09-08 21:09:54 发布

阅读量318

点赞数

文章标签： vue 写门户网站 Vue 合同模板

在使用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-dev
```
```
npm 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是你的局域网地址