一、vue-cli 脚手架搭建 vue 开发环境
-
安装 node.js，node.js 自带 npm
-
打开命令行程序，首先安装 vue-cli 脚手架
npm install vue-cli -g安装依赖要看情况使用
--save 安装到项目内 打包后生成环境也会带上
--save-dev 安装到项目内 只会在开发环境上使用
-g 安装到 node 的全局内
-
开始创建项目
vue init webpack 项目名称随后配置下项目信息,是否安装 vue-router,ESlint 之类的
创建完后
cd进入项目目录内,输入npm install安装依赖-
安装完后
npm run dev跑本地服务npm run build生产环境打包
二、vue 使用 lib-flexible+px2rem 移动端自适应
-
npm 安装 lib-flexible
npm i lib-flexible --save-devnpm i px2rem-loader --save-dev 到项目内的 main.js 文件中引入 lib-flexible
import "lib-flexible";
- 然后去 build/until.js 文件里找到
exports.cssLoaders，插入以下代码
const px2remLoader = {
loader: "px2rem-loader",
options: {
remUnit: 75
}
};
remUnit的值为 `1rem = 75px`
- 继续找到
generateLoaders函数 找到以下代码
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader];
将`px2remLoader`插入到数组中
const loaders = options.usePostCSS
? [cssLoader, postcssLoader, px2remLoader]
: [cssLoader, px2remLoader];
随后重新跑下就阔以了
三、使用 sass
- 安装 node-sass 和 sass-loader
npm install node-sass sass-loader --save-dev
- 在.vue 组件中使用 sass
<style lang="scss" scoped>
.....
</style>
杂乱笔记
- 组件如何传参
- 子组件获取父组件数据
父组件
<children :childrenData="data"></children>
这里的 data 为父组件的 data 数据
子组件
export default {
data() {
return {};
},
props: ["childrenData"],
methods: {
getData() {
console.log(this.childrenData);
}
}
};
取值为 this.childrenData
