随笔记

vue-element-admin 
vue-element-admin 是一个后台前端解决方案 基于vue+ elementUi实现
本地运行体验
$ git clone https://gitee.com/mirrors/vue-element-admin.git # 从码云上拉取
$ cd vue-element-admin # 切换到具体目录下
$ npm install  # 安装所有依赖
$ npm run dev  # 启动开发调试模式  查看package.json文件的scripts可知晓启动命令
 

 

基于vue-element-admin的简化版vue-element-templete 二次开发

步骤:
 1：下载项目
 2：本地项目初始化
    >1：删除 git文件
    >2：修改项目名
    >3: 修改package.json文件
            项目名
            版本
 3：项目git初始化
        >1 ：git init  初始化项目 新建一个git隐藏文件
        >2  git add .  git commit  -m ''  提交到本地仓库

 4:建远程仓库
     >1: 项目同名
 5：推送远程

主要文件介绍

main.js是整个项目的入口文件（webpack中学习的入口文件）

App.vue是根组件

`permission.js`** 是控制页面登录权限的文件，在main.js中引入了它。

 settings.js   对于一些项目信息的配置，里面有三个属性 **`title`**(项目名称)，**`fixedHeader`**（固定头部），**`sidebarLogo`**（显示左侧菜单logo）

其中app.js模块和settings.js模块，功能已经完备，不需要再进行修改。 user.js模块是我们后期需要重点开发的内容，所以这里我们将user.js里面的内容删除，并且导出一个默认配置

 

 

SCSS [官方文档](https://www.sass.hk/)

定义  

      `sass`使用`$`符号来标识变量   $basic-border: 1px solid black;

使用

     #app {
         border: $basic-border;
     }    

 嵌套语法  和less一样，scss同样支持**`嵌套型`**的语法 

     #app{
          background-color:  $highlight-color;
          border:$basic-border;
          .container{
                  font-size:30px;
         }
    }

*&父选择器

假如你想针对某个特定子元素 进行设置
$highlight-color: #f90;
$basic-border: 1px solid black;

#app{
  background-color:  $highlight-color;
  border:$basic-border;
  .container{
    font-size:30px;
  }
  a{
    color:blue;
    &:hover{
      color: red;
    }
  }
}

 

模块

多个.scss文件可以相互引用。例如：在一个.scss文件(base.scss)定义多个变量，然后在另一个.scss（test.scss）中引入这个文件，就可以使用其中定义的变量了

格式

`@import './xxxx.scss';`

 

 

sass、scss、less、css的区别

less,  sass, scss都是**css预处理语言**（也是对应的文件后缀名），它们的语法功能比css更强大。

预处理语言使用是：**开发**时用**预处理语言**，在**打包上线**时，用webpack再配合loader工具给**转成css**（Cascading Style Sheets）给浏览器使用。

后缀名：SASS（**S**yntactically **A**wesome **S**tyle**S**heets）版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss

 

scss与less类似，只是一种css样式的**预处理语言** (浏览器不能直接使用的，需要转成css)

很多用法都与less类似（变量，嵌套，模块化）不需要花太多精力去学习它。scss与less类似，只是一种css样式的**预处理语言** (浏览器不能直接使用的，需要转成css)