Sass

一、环境、工具 jdk1.8 maven spring-boot idea VSVode vue 百度网盘(vue+springboot+nginx源码)： 链接：https://pan.baidu.com/s/1m3ciEUmUsjqoQBnIJBR7Zw 提取码：6gi9 二、搭建后台spring-boot框架 步骤： 1、new- project选择Spring Initializr next 2、创建项目文件结构以及jdk版本 3、选择项目需要的依赖 next然后finish 4、创建完毕的文件结构如图 5、对pom.xml更改，信息如下 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation ="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.zks</groupId> <artifactId

1、首先要保证项目中能够使用scss(不会可以查看我的相关博客) 2、 安装依赖 npm install sass-resources-loader --save-dev 3、在src下创建全局scss文件 4、 在项目里找到build/utils文件。并找到下图位置 然后在scss: generateLoaders('sass')后面加上以下代码 { { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/style.scss') } } 来源： oschina 链接： https://my.oschina.net/u/4138368/blog/4270208

工作需要做一个带滑块效果的导航栏，初步想法是用element的导航组件去做，后面摸坑结合各位大佬的博客初步实现效果，话不多说，直接上代码，记录一下爬坑之旅 1 <template> 2 <div class="y-nav"> 3 <el-row class="nav"> 4 <el- menu 5 : default -active="$route.path" 6 class="el-menu-demo" 7 mode="horizontal" 8 @select="handleSelect" 9 text-color="#fff" 10 > 11 <el-menu-item index="/index"> 12 <router- link 13 to="/" 14 @mouseover.native="itransition($event )" 15 @mouseout.native="outtransition($event)" 16 >首页</router-link> 17 </el-menu-item> 18 <el-menu-item index="/leaderboard/leaderlist"> 19 <router- link 20 :to="{name:'leaderboard'}" 21 @mouseover.native="itransition($event

Taro 环境安装 Taro是一个前端小程序框架，通过这个框架写一套代码，再通过 Taro 的编译工具，就可以将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动小程序、H5、React-Native 等）运行的代码，[Taro官网](https://nervjs.github.io/taro/docs/README.html) 环境搭建： 1、先查看Node版本，确认安装最新版本 node -v 2、安装 npm config set registry http://registry.npm.taobao.org/ npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ cnpm install -g @tarojs/cli 第一个命令是使用npm的淘宝镜像， 第二个命令是配置node-sass为淘宝镜像 第三个命令是使用cnpm全局安装taro，将会生成一个taro 命令。taro-cli 包位于 Taro 工程的 packages 目录下，主要负责项目初始化、编译、构建等 安装完成之后通过如下命令查看taro是否安装完毕 taro -V 项目搭建 通过如下命令搭建项目 taro init taro-learning-pro 3、安装一些依赖 npm install tslint

单文件组件 vue 中后缀名是 .vue 的文件，我们称它为 单文件组件 单文件组件的优点 在 vscode 中安装 vetur 插件。能够让单文件组件有很好的语法高亮和代码提示 可以将样式写在组件内。并且通过配置还能让样式只对当前组件生效（作用域样式） 要实现 作用域样式，只需要在单文件组件的 style 标签上设置 scoped 属性 作用域样式是如何实现的呢？审查元素就可以知道 可以使用现代化的 ESM 模块化 一个单文件组件的组成 template script style 给 style 标签添加上一个 scoped 属性，这时，这个 style 标签中的样式就只对当前组件生效 使用sass 在项目中安装 sass-loader $ npm install sass-loader --save-dev 在项目中安装 node-sass $ npm install node-sass --save-dev 在单文件组件中设置 style 的 lang 属性为 scss 单文件组件的一些特点 一个单文件组件，必须要有 template 。其余两个可有可无 如果 script 中暴露组件的选项配置对象时没有设置 name 选项，文件名就是当前的组件名 style 标签可以有多个 style 还可以去配置使用 less 或 sass 来源： oschina 链接： https:/

项目搭建 + ⾸⻚布局实现 上篇对该项目做了个总述 : Vue + Element-ui实现后台管理系统(1) --- 总述 这篇主要讲解 项目搭建 + 后台⾸⻚布局实现 ： 整体效果 后台首页按布局一共包含3个部分: 1、左侧栏部分 2、头部部分 3、内容部分。 说明 在整个后台管理系统中， 左侧栏和头部部分是应该一直在页面中展示的 ，所以对于每个页面这两个组件都应该存在,而 内容部分 才是通过router的跳转而跳到不同的组件。 下面先把整个项目搭建一下，然后再来讲解上面三个部分 一、项目搭建 1、环境搭建 #1、安装node （node -v查询版本号） node 安装 #2、安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org #3、安装 webpack，以全局的方式安装 npm install webpack -g #4、全局安装vue以及脚手架vue-cli npm install @vue/cli -g --unsafe-perm #5、创建vue项目 mall-manage-system是你起的项目名称 vue create mall-manage-system #6、运行当前项目 这个整个项目就搭建好了 npm run serve 在安装中可能会存在的问题 1、 node升级后

一、vue文件 vue文件是一个自定义的文件类型，用类HTML语法描述一个vue组件，每个.vue组件包含三种类型的顶级语言快< template>< script>< style>，还允许添加自定义的模块； < template > < div class ="example" > {{ msg }} </ div > </ template > < script > export default { data () { return { msg: ' Hello world! ' } } } </ script > < style > .example { color : red ; } </ style > < custom1 > This could be e.g. documentation for the component. </ custom1 > 如果你喜欢分隔你的.vue文件到多个文件中，你可以通过src属性导入外部文件： < template src ='./template.html' ></ template > < style src ='./style.css' ></ style > < script src ='./script.js' ></ script > 二、vue-loader vue-loader会解析文件，提取出每个语言块