在正式开始项目之前，要选定项目的技术方案，并且利用项目脚手架工具生成初始的项目结构，根据公司的实际情况，搭建好项目目录，根据实际使用情况，安装好需要的工具及转换器，设定好初始的项目文件，以及清除默认格式等
less
sass
stylus
fastclick
mint-ui
-
初始化项目结构（vue init webpack myitzb）
image.png
-
修改相关配置（config index.js autoopenbrowser port；assets/component app.vue main.js router index.js hello route:[];要删除相关默认的路由和组件）
-
目录结构（一般根据各个公司要求修改src文件目录）
image.png
image.png
-
项目技术结构选型
基础：vue+vuex+vuerouter
网络请求：axios（官方推荐）
css预处理器：less/sass/stylus/postcss（vue集成）
postcss:使用NodeJS编写的一款css预处理工具，类似于sass/less/stylus等预处理工具，但是它本身没有太过强大的功能，相当于一个插件平台，围绕这个平台有很多优秀插件。例如：vue-cli默认集成的postcss-url：用于处理url路径；autoprefixer：自动添加浏览器适配的前缀；cssnano：自动优化压缩css代码。
image.png
stylus
可以省略{}，每个css语句后面的；，tab键加选择器代表后代，&代表父选择器如：
ul
list-style:none;
li
float:left
&:nth-child(3)
background-color:red
stylus和less·sass一样可以设置变量·复用的样式块·通过tab表示后代选择器·通过&表示父选择器
如何选择less
1 安装less npm i less -D
2 安装less-loader npm i less-loader -D
3 设置模板file-setting-editor-file and code template-vue single file component scoped lang=“less”
image.png
-
导入reset.css文件清除浏览器默认样式（static存放第三方静态css文件）
image.png
image.png
-
导入base.css文件清空默认样式设置功能类（assets存放自己的静态文件，主要是左浮/右浮/清除浮动/输入框/超链接/图片等的默认样式，也可以封装常用的功能类，比如主色）
image.png
-
导入fastclick处理移动端的点击事件，默认会延迟100~300ms判断双击。
fastclick
1 安装 npm i fastclick -S
2 导入fastclick
3 注册fastclick
image.png
不同设备的适配：媒体查询/em/rem/vw/js处理/rpx
一般思路使根据不同屏幕的宽度设置不同的页面，或者得到浏览器的默认宽度，以750px的设计标准自动根据页面宽度对元素大小进行缩放，不单单是body，一般body和html都要初始化宽高为100%
如何在项目中使用安装的文件
1 安装文件和loader在对应的未知标识使用，如less
2 下载文件在对应的位置导入使用，如reset.css和base.css
3 安装文件导入并且声明要使用，如fastclick和mint-ui
网友评论