vue-day13
1-stylus动态样式语言
stylus是一个动态的css样式语言
1.1-安装编译环境
-
stylus-loader最新版本和目前
vue-cli-2.x不兼容, 所以需要降低stylus-loader的版本npm i stylus stylus-loader@2.0.0 -D
1.2-语法特点
- stylus中摒弃了
{} : ; - 通过缩进来表示包含关系
- 后缀名为
.styl
1.3-vue项目中启用stylus
-
在组件中的style标签上添加
lang="stylus"属性<style lang="stylus"> </style>
1.4-stylus特性介绍
-
注释语法
// 快捷键: ctrl+/ -
选择器
.container height 300px border 1px solid #DDD margin 10px 0 -
嵌套语法
.container height 300px border 1px solid #DDD margin 10px 0 .box width 300px height 300px background pink -
变量定义
// 变量定义 bgcolor=orange // 调用 .box width 300px height 300px background bgcolor -
函数
// 定义函数 myfont() color red font-weight 700 font-size 40px // 调用函数 .box myfont() -
插值: 自动添加不同浏览器前缀
- -webkit
- -o
- -ms
- -moz
// 定义插值 vendor(prop,value) -webkit-{prop} value -o-{prop} value -ms-{prop} value -moz-{prop} value // 调用插值 .box vendor(box-shadow,0 0 2px 2px #000) -
引用父级选择器
a &:hover color red text-decoration none -
判断语法
// 定义变量 borderStyle=solid .box if(borderStyle==solid) border 1px solid red else border 1px solid dashed -
导入语法
@import '../assets/css/demo.styl'
2-小U商城后台项目打包优化
2.1-打包优化
-
通过link标签的方式引入第三方的样式文件
-
将
element-ui组件库的样式文件拷贝到/static资源文件夹 -
在项目根目录下的
index.html文件中使用相对路径引入<!-- 通过link标签引入第三方的样式文件 --> <link rel="stylesheet" href="./static/theme-chalk/index.css">
-
-
对资源文件的引入方式做调整, 使用相对路径引入资源文件(默认为根路径方式), 目的是可以脱离web服务器运行打包之后的项目(实际生产中不需要这样特殊处理)
-
打开
config/index.js, 做如下修改build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), // assetsSubDirectory: 'static', // assetsPublicPath: '/', // 修改资源文件的引入方式为相对路径 assetsSubDirectory: './static', assetsPublicPath: './', -
打开
build/utils.js, 带+的为新增配置项(51行左右)return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', // 指定字体文件的引入方式 + publicPath:'../../' })
-
-
批量清除调试信息: 打开配置文件
build/webpack.prod.conf.js, 添加如下配置, 带+的为新增配置new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, // 批量清楚调试日志 + drop_console:true } }, sourceMap: config.build.productionSourceMap, parallel: true }),
2.2-项目打包
-
在项目根目录下运行打包命令, 打包之后的文件会存放在项目根目录下的dist文件夹中
npm run build
3-vant组件库
- 基于移动端的组件库
3.1-安装
npm i vant -S
3.2-使用
3.2.1-全部引入
- 注意: 如果采用全部导入, 必定要把
.babelrc中按需导入的配置项删掉
-
导入vant组件的核心文件
import Vant from 'vant'; -
导入vant组件的样式表
import 'vant/lib/index.css'; -
注册
Vue.use(Vant); -
使用
<van-button type="primary">按钮</van-button>
3.2.2-自动按需引入
-
安装
babel-plugin-import插件npm i babel-plugin-import -D -
配置babel, 打开.babelrc配置文件, 添加如下配置
{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": ["transform-vue-jsx", "transform-runtime", // 自动按需导入vant组件 + ["import", { + "libraryName": "vant", + "libraryDirectory": "es", + "style": true + }] ] } -
重启开发服务器
npm run dev -
使用
import {Button} from 'vant'; Vue.use(Button);<van-button type="primary">按钮</van-button>
3.2.3-手动按需导入
-
导入组件核心文件
import Button from 'vant/lib/button'; -
导入组件对应的样式表
import 'vant/lib/button/style'; -
注册
Vue.use(Button); -
使用
<van-button type="info">按钮</van-button>
4-git版本控制工具
- 在团队成员之间共享项目代码
- 代码版本控制工具(可以记录项目代码的每一次更新)
4.1-下载安装
- 下载地址: https://git-scm.com/downloads
- 安装:
- 双击安装包, 默认安装即可
4.2-检测是否安装成功
-
在桌面空白区域点击鼠标右键, 如果能看到如下菜单选项, 说明安装成功
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3JfPYgLL-1611196190604)(media\检测是否安装成功.jpg)]
4.3-git的核心工作原理
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p93CvxFZ-1611196190606)(media\git工作流程.png)]
4.4-全局配置
-
全局配置用户名和邮箱(只需要配置一次)
git config --global user.name 用户名 git config --global user.email 邮箱地址
4.5-git相关操作命令行
-
初始化仓库
git init -
将文件添加暂存区
git add 文件名 // 或者(将当前目录下所有文件提交到暂存区) git add . -
将暂存区的文件提交本地仓库
git commit -m 注释 -
查看提交日志
git log // 查看简洁日志 git log --oneline // 或者 git reflog -
查看当前目录下面没有被提交到版本库中的文件
git status -
版本回滚
-
获取目标版本的版本号
git log --oneline -
运行版本回滚命令
git reset --hard 版本号
-
4.6-添加项目忽略文件
-
在项目根目录创建一个特殊文件
.gitignore, 将忽略文件或文件夹名字按照如下格式写入即可/node_modules test.html
4.7-将代码托管到github
-
注册github账号
-
登录github
-
在github上新建一个远程仓库
-
使用如下命令行将代码推送到远程仓库
// -u: 记录推送历史 git push 仓库地址 分支名称 -u
4.8-公钥秘钥身份认证方式
-
通过命令行生成公钥秘钥对(必须使用git提供的命令行工具)
ssh-keygen -t rsa -C 邮箱地址一路回车, 看到如下图案说明公钥秘钥生成成功
+---[RSA 3072]----+ | .o. ..oB=o+. | | .. . +*o++ o . | |o. . ++*.o. o o | |o = +oo. . | |.. . S o | |o.. . o | |o+. E o | |=+o o | |*+ o. . | +----[SHA256]-----+公钥秘钥存放在操作系统用户目录下的
.ssh文件夹下,id_rsa.pub是公钥,id_rsa是秘钥 -
使用记事本打开公钥文件
id_rsa.pub, 复制公内容, 在github账户后台进行配置
4.9-远程代码仓库操作命令
-
推送代码
- -u参数作用: 记录提交历史, 之后可以直接使用
git push直接推送代码
git push 仓库地址 分支名称 -u - -u参数作用: 记录提交历史, 之后可以直接使用
-
拉取远程仓库的代码
git pull -
克隆仓库
git clone 仓库地址
5-vue项目的优缺点
5.1-优点
- 开发出来的项目性能更好(单页面局部刷新)
- 减轻了服务器压力(页面渲染在浏览器上完成)
- 开发效率高(有配套的组件库)
5.2-缺点
- 不利于SEO(搜索引擎优化)
6-SSR服务端渲染
- SSR: server side render(服务端渲染)
6.1-vue-server-renderer 插件
- 作用: 在服务端编译vue组件
6.1.1-核心方法
-
createRender(): 创建一个实例对象
// 导入vue-server-renderer服务端渲染插件 const ssr=require('vue-server-renderer'); const render=ssr.createRenderer({ // 指定vue组件编译之后的挂载页面 template:fs.readFileSync('./index.html','utf-8') }); -
renderToString(): 编译vue组件
const Vue=require('vue'); // 创建vue组件 const home=new Vue({ template:fs.readFileSync('./views/home.html','utf-8'), data(){ return { title:'网站首页', list:[ 'vue', 'react', 'angular' ] } } }); // 编译vue组件 // err表示错误对象; html是最终编译好的完成页面 render.renderToString(home,{title:'网站首页'},(err,html)=>{ if(err){ return console.log(err); } console.log(html); });
参考文档
-
list:[ 'vue', 'react', 'angular' ] } }});
// 编译vue组件
// err表示错误对象; html是最终编译好的完成页面
render.renderToString(home,{title:‘网站首页’},(err,html)=>{
if(err){
return console.log(err);
}
console.log(html);
});
5818
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
