window.cnblogsConfig = {
blogUser: 'MoYu',
blogAvatar: 'https://gitee.com/MoYu-zc/picgo/raw/master/img/20210213094450.jpg',
blogStartDate: '2020-02-09',
webpageTitleOnblur: '(oﾟvﾟ)ノ Hi,Back',
webpageTitleOnblurTimeOut: 500,
webpageTitleFocus: '(*´∇｀*) 欢迎回来！',
webpageTitleFocusTimeOut: 1000,
webpageIcon: "https://gitee.com/MoYu-zc/picgo/raw/master/img/20210213094450.jpg",
enable: true, // 是否开启日/夜间模式切换按钮
auto: { // 自动切换相关配置
enable: false, // 开启自动切换
dayHour: 7, // 日间模式开始时间，整数型，24小时制
nightHour: 20 // 夜间模式开始时间，整数型，24小时制
}
switchDayNight: {
enable: true,
auto: {
enable: true
}
},
progressBar: {
id : 'top-progress-bar', // 请勿修改该值
color : '#77b6ff',
height : '2px',
duration: 0.2,
},
loading: {
rebound: {
tension: 16,
friction: 5,
},
spinner: {
id: 'spinner',
radius: 90,
sides: 3,
depth: 4,
colors: {
background: '#f0f0f0',
stroke: '#272633',
base: null,
child: '#272633',
},
alwaysForward: true, // When false the spring will reverse normally.
restAt: 0.5, // A number from 0.1 to 0.9 || null for full rotation
renderBase: false,
}
},
homeTopAnimationRendered: true,
homeTopAnimation: {
radius: 15,
density: 0.2,
color: 'rgba(255,255,255, .2)', // 颜色设置，“random” 为随机颜色
clearOffset: 0.3,
},
essayTopAnimationRendered: true,
essayTopAnimation: {
triW : 14,
triH : 20,
neighbours : ["side", "top", "bottom"],
speedTrailAppear : .1,
speedTrailDisappear : .1,
speedTriOpen : 1,
trailMaxLength : 30,
trailIntervalCreation : 100,
delayBeforeDisappear : 2,
colorsRandom: false, // v1.2.4 是否开启随机颜色
colors: [
'#96EDA6', '#5BC6A9',
'#38668C', '#374D84',
'#BED5CB', '#62ADC6',
'#8EE5DE', '#304E7B'
]
},
homeTopImg: [
"https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/home_top_bg.webp",
"https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/home_top_bg.webp"
],
homeBannerTextType: "one",
essayTopImg: [
"https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp",
"https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp",
"https://gitee.com/MoYu-zc/picgo/raw/master/img/20210208190902.jpg",
"https://gitee.com/MoYu-zc/picgo/raw/master/img/20210208190954.jpg",
],
codeMaxHeight: true,
codeLineNumber: true,
essayCode: {
fontFamily: "'Ubuntu Mono',monospace", // 代码框字体
fontSize: "14px" // 代码框字体大小
},
}
第一个 vue-cli项目
什么是vue-cli
vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板；
预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速
主要的功能:
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
需要的环境：
可以使用如下语句进行验证：
1.安装Node.js淘宝镜像加速器（cnpm）
# -g 就是全局安装
npm install cnpm -g
# 或使用如下语句解决npm速度慢的问题
npm install --registry=https://registry.npm.taobao.org
安装的位置：C:\用户\xxxx\AppData\Roaming\npm
2.安装vue-cli
cnpm install vue-cli -g
#测试是否安装成功
#查看可以基于哪些模板创建vue应用程序，通常我们选择webpack
vue list
创建第一个Vue-cli项目
1.创建一个 Vue项目 文件夹
2.cmd 进入这个文件夹的目录下
vue init webpack xxxx
即：在该目录下创建一个vue-cli项目
- 前三个就是填 项目名、项目描述、作者名
- 第四个选择 第一个
- 后面的全部 no
完成后会出现一个文件夹，内容为 :
3.初始化并运行
cd xxxx #进入新出来的文件夹，xxxx即你上面的文件夹名
npm install # 全局安装
npm run dev # 运行
个人博客为：
MoYu's Github Blog
MoYu's Gitee Blog
posted @
2021-04-18 21:03
MoYu-zc
阅读(
119)
评论()
编辑
收藏
举报
