vue脚手架搭建项目初始化

在使用vue create xxx 创建项目后要在main.js文件中加入

/* jshint esversion: 6 */

 如果报错定义了但未使用需在代码块后加入以下代码

 // eslint-disable-line no-unused-vars

 

vue-cli

vue-cli是和vue进行深度组合的工具，可以快速帮我们创建vue项目，并且把一些脚手架相关的代码给我们创建好。真正使用vue开发项目，都是用vue-cli来创建项目的。

安装：

Vue CLI需要Node.js 8.9或更高版本 (推荐8.11.0+)。node环境安装后，直接通过npm install -g @vue/cli即可安装。安装完成后，输入vue --version，如果出现了版本号，说明已经下载完成。

用命令行创建项目：

  1. 在指定路径下使用vue create [项目名称]创建项目。
  2. 会让你选择要安装哪些包（默认是Babel和ESLint），也可以手动选择。
  3. 如果在安装的时候比较慢，可以在安装的时候使用淘宝的链接：vue create -r https://registry.npm.taobao.org [项目名称]。
  4. 如果实在不想在创建项目的时候都指定淘宝链接，可以在当前用户目录下，找到.npmrc，然后设置registry=https://registry.npm.taobao.org。

用界面创建项目：

  1. 打开cmd，进入到你项目存储的路径下。然后执行vue ui，就会自动打开一个浏览器界面。
  2. 按照指引进行选择，然后一顿下一步即可创建。

项目结构介绍：

  1. node_modules：本地安装的包的文件夹。
  2. public：项目出口文件。
  3. src：项目源文件：
    • assets：资源文件，包括字体，图片等。
    • components：组件文件。
    • App.vue：入口组件。
    • main.js：webpack在打包的时候的入口文件。
  4. babel.config.js：es*转低级js语言的配置文件。
  5. package.json：项目包管理文件。

组件定义和导入：

  1. 定义：组件定义跟之前的方式是一模一样的。只不过现在模板代码专门放到.vue的template标签中，所以不再需要在定义组件的时候传入template参数。另外，因为需要让别的组件使用本组件，因此需要用export default将组件对象进行导出。
  2. 导入：因为现在组件是在不同的文件中。所以如果需要引用，那么必须进行导入。用ES6语法的import XXX from XXX。

局部样式：

默认情况下在.vue文件中的样式一旦写了，那么会变成全局的。如果只是想要在当前的组件中起作用，那么可以在style中加上一个scoped属性即可。示例代码如下：

<style scoped>
.info{
   background-color: red;
}
</style>

使用sass语法：

很多小伙伴在写样式代码的时候，不喜欢用原生css，比较喜欢用比如sass或者less，这里我们以sass为例，我们可以通过以下两个步骤来实现：

  1. 安装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，如果我们想要一个盒子是占据整个宽度的一半，那么会将这个盒子的宽度设置为187.5px，但是并不是所有手机的宽度都是375px，因此就会造成问题。这时候我们可以通过rem来解决这个问题。

什么是rem：

  1. em：当前元素字体大小相对于父标签的字体大小。比如： 
     <div style="font-size:16px;">
     <span style="font-size:2em">你好</span>
 </div>
    在div中字体大小是16px，而在span标签中因为用的是2em，因此是2倍的父标签字体的大小，也就是32px。
  2. 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就是0.32rem。这样写是没有问题的，但是如果用户现在的手机不是750px的，而是375px的，这时候直接写个0.32rem不是会有问题吗？目前这样来说是有问题，但是我们只需要设置html的font-size为windowWidth/750*100，在这个公式中将windowWidth换算成375px，结果为50px，那么用0.32rem后的px为16px，正好是750px尺寸的一半，达到了缩小一倍的效果。

在Vue-cli中实现rem布局：

在使用vue-cli创建的项目中，我们可以通过一些第三方包来方便的实现rem的布局。要安装两个包，分别是：postcss-pxtorem、lib-flexible。安装命令通过npm install --save-dev postcss-pxtorem lib-flexible安装即可。在安装完包后，还需要配置两个地方：

package.json：
 "postcss": {
     "plugins": {
       "autoprefixer": {},
       "postcss-pxtorem": {
         "rootValue": 37.5,
         "propList": [
           "*"
         ],
         "selectorBlackList": [
           "van-*"
         ]
       }
     }
   }
main.js：
 import "lib-flexible"

 

这样以后在写单位的时候，就不需要换算成rem，直接写px就可以，postcss-pxtorem会自动的将我们写的px转化成rem。而lib-flexible会根据当前的尺寸，来调整html上的font-size进行适配。而其中的37.5则根据设计师设计图的尺寸来，比如设计师是用375px的尺寸来设计的，那么就是375/10。

vant组件库使用

vant库是有赞公司前端团队开源的一款针对vue库的组件库。里面集成了很多移动端用到的组件，包括按钮、图片、Icon图标等。而且因为有赞是一个做微商城的公司，所以有很多微商城的组件比如地址列表、商品卡片、优惠券等组件。

安装：

npm install vant --save

 

引入组件：

自动按需引入组件 (推荐)

babel-plugin-import是一款babel插件，它会在编译过程中将import的写法自动转换为按需引入的方式

module.exports = {
plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]

 


};
// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';

导入所有组件：

Vant支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

Vue项目启动
npm run serve

　　Local本地地址
　　Network是你的局域网地址

 

posted @ 2020-10-20 08:52  一文g  阅读(591)  评论(0)  编辑  收藏  举报