Vue CLI3.0+Flexible
文章主要记录内容：
- Vue CLI3.0环境搭建过程
- Vue目录结构及其配置
- component组件注册和使用
- Vue使用scss
- Vue使用Flexible和postcss-2rem
一、Vue CLI3.0环境搭建过程
1、npm install -g @vue/cli，安装Vue CLI3.0
如果安装了旧版本，需要使用npm uninstall vue-cli -g卸载旧版本再重装新版本;
使用vue -V查看版本号，看是否成功安装；
2、vue create hello-world，创建一个hello-world项目
（1）选择配置：
default.png
默认选择"default（babel，eslint)"，构建一个基本的Vue项目，Vue-router和Vuex之后需要自己手动安装；
选择"Manaully select features"，可按需选择项目需要的依赖模块（使用电脑“空格键”进行选择），后续不需要自己手动安装；
按需选择依赖模块.png
可能遇到无法选择的问题：详情请查看
如果你在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作。你必须通过 winpty vue.cmd create hello-world 启动这个命令。不过，如果你仍想使用 vue create hello-world，则可以通过在 ~/.bashrc 文件中添加以下行来为命令添加别名。 alias vue='winpty vue.cmd' 你需要重新启动 Git Bash 终端会话以使更新后的 bashrc 文件生效。
（2）选择结束，回车，选择路由模式
路由模式选择.png
路由模式有两种：history模式和hash模式；
默认是history模式，实际项目也通常采用 history 模式；
（3）选择css编译方式
选择css编译方式.png
之后的相关配置项如果不需要，直接回车默认选择第一个就🆗啦；
（4）项目创建完成
项目创建完成.png
根据图示：使用
cd hello-world进入项目；使用
npm run serve运行项目；打开“ http://localhost:8080/”，显示如下页面，表示项目创建成功：
创建成功.png
（5）项目完成，打包
一般项目开发完成之后使用npm run build打包项目；
我们在开发前也可以测试打包，打包成功之后会在项目目录生成一个dist文件夹；
二、Vue目录结构及其配置
目录结构
1、相关配置放置
Vue Cli3.0 删除了 config、build 等配置目录，如果需要进行相关配置我们需要在根目录下创建 vue.config.js进行配置。
Vue Cli3.0项目的相关配置都需要在vue.config.js书写配置;
vue.config.js官网文档
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
三、component组件注册和使用
在component文件夹下新建Home.vue文件；然后如下步骤：
component组件注册和使用.png
四、Vue使用scss
1、npm install node-sass --save-dev
2、npm install sass-loader --save-dev
也许你会遇到以下报错:
test{ ^ Invalid CSS after ".test{": expected "}", was "{" in E:\code\Vue\vue-cli3.0\hello-world\src\components\Home.vue (line 17, column 7)
解决：
<style lang="sass"> ... </style>改成<style lang="scss"> ... </stycle>
如果你想引入外部scss，可在style里使用：
@import "../assets/css/reset.scss";
五、Vue使用flexible和postcss-2rem
1、移动端适配方案flexible
（1）npm install lib-flexible --save，安装flexible
（2）在main.js中引入flexible：
import 'lib-flexible/flexible.js'
（3）删除index.html的meta标签（如下）：
<meta name="viewport" content="width=device-width,initial-scale=1.0">
因为 lib-flexible会通过JS动态改写<meta>标签（添加属性data-dpr、font-size），并根据设备的不同动态改写,如：
flexible原理.gif
2、px自动编译rem插件
（1）npm install postcss-px2rem --save，安装postcss-px2rem
如果不想px转rem,保留原来px（如fontSize一般不转rem）,只需要在后边加/no/,
font-size: 20px;/*no*/
（2）配置
在vue.config.js中做如下配置：
module.exports = {
css: {
loaderOptions: {
css: {
// options here will be passed to css-loader
},
postcss: {
// options here will be passed to postcss-loader
plugins: [require('postcss-px2rem')({
remUnit: 75 //1rem=75px，这里是设计稿的尺寸是750px
})]
}
}
},
publicPath:'./'
}
因为flexible会将设计稿分成100份,所以每一份a就是7.5，即：
1a = 7.5px
1rem = 75px
所以 remUnit: 75表示设计稿尺寸为750px;
如果px转成rem表示已经安装成功了：
image.png
不定期整理笔记小记~
