1-项目初始化1

在正式开始项目之前，要选定项目的技术方案，并且利用项目脚手架工具生成初始的项目结构，根据公司的实际情况，搭建好项目目录，根据实际使用情况，安装好需要的工具及转换器，设定好初始的项目文件，以及清除默认格式等
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