一、vue-cli 脚手架搭建 vue 开发环境

---

1. 安装 node.js，node.js 自带 npm

   Node.js

2. 打开命令行程序，首先安装 vue-cli 脚手架

   npm install vue-cli -g

   安装依赖要看情况使用

   --save 安装到项目内 打包后生成环境也会带上

   --save-dev 安装到项目内 只会在开发环境上使用

   -g 安装到 node 的全局内

3. 开始创建项目

   vue init webpack 项目名称

   随后配置下项目信息,是否安装 vue-router,ESlint 之类的

4. 创建完后 cd 进入项目目录内,输入npm install安装依赖

5. 安装完后

   npm run dev 跑本地服务

   npm run build 生产环境打包

二、vue 使用 lib-flexible+px2rem 移动端自适应

---

1. npm 安装 lib-flexible

   npm i lib-flexible --save-dev

   npm i px2rem-loader --save-dev

2. 到项目内的　main.js　文件中引入 lib-flexible

import "lib-flexible";

3. 然后去　build/until.js　文件里找到 exports.cssLoaders ，插入以下代码

const px2remLoader = {
  loader: "px2rem-loader",
  options: {
    remUnit: 75
  }
};

remUnit的值为 `1rem = 75px`

4. 继续找到 generateLoaders 函数 找到以下代码

const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader];

将`px2remLoader`插入到数组中

const loaders = options.usePostCSS
  ? [cssLoader, postcssLoader, px2remLoader]
  : [cssLoader, px2remLoader];

随后重新跑下就阔以了

三、使用 sass

---

1. 安装 node-sass 和 sass-loader

npm install node-sass sass-loader --save-dev

2. 在.vue 组件中使用 sass

<style lang="scss" scoped>
  .....
</style>

杂乱笔记

---

• 组件如何传参

1. 子组件获取父组件数据

父组件

<children :childrenData="data"></children>

这里的 data 为父组件的 data 数据

子组件

export default {
  data() {
    return {};
  },
  props: ["childrenData"],
  methods: {
    getData() {
      console.log(this.childrenData);
    }
  }
};

取值为 this.childrenData