Vue
几种还不错的vue ui组件库
Element：一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
Vuetify：根据 Google Material Design 指南实现。Vuetify支持SSR(服务端渲染)，SPA(单页应用程序)，PWA(渐进式web应用程序)和标准HTML页面
Vant：轻量、可靠的移动端 Vue 组件库，还有小程序版
BootstrapVue：基于Bootstrap的UI库
iView：是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品
Mint UI：基于 Vue.js 的移动端组件库
zeit-vue：基于zeit design 简洁设计
响应式布局
Element UI 的响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。
xs 超小屏幕 手机 (<768px)
sm 小屏幕 平板 (≥768px)
md 中等屏幕 桌面显示器 (≥992px)
lg 大屏幕 大桌面显示器 (≥1200px)
参考地址：https://v3.bootcss.com/css/#grid-options
vue中使用element UI框架
官方文档：http://element-cn.eleme.io/#/zh-CN/component/installation
推荐在vue-cli中使用插件快速开发：
https://github.com/ElementUI/vue-cli-plugin-element
给vue项目中配置favicon图标
在webpack.dev.conf.js和webpack.prod.conf.js中HtmlWebpackPlugin插件配置中添加 favicon: ‘favicon.ico’,
plugins: [
...
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
favicon: 'favicon.ico'
}),
...
]
然后将favicon.ico图标放到工程跟目录下
eslint
eslint关闭一些检测规则
配置文件在项目根目录里 .eslintrc.js, 其中 rules 就是配置规则
配置参数:
rules: {
"规则名": [规则值, 规则配置]
}
规则值：
"off"或者0 //关闭规则关闭
"warn"或者1 //在打开的规则作为警告（不影响退出代码）
"error"或者2 //把规则作为一个错误（退出代码触发时为1）
eg.
// 关闭空格检测
'indent': 0,
// 关闭引号检测
'quotes': 0,
// 关闭结尾分号检测
'semi': 0,
// 关闭函数名后面的空格检测
'space-before-function-paren': 0,
// 关闭强制文件末尾换行符检测
'eol-last': 0
在子目录的vue项目中router不起作用
如果在子目录下，path的匹配规则将失效，因为默认是以根目录为依据，此时需要配置 base:’__dir_path’,
eg.
export default new VueRouter({
mode: 'history',
base: '/vue/',
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{ path: '*', component: NotFoundComponent }
]
})
WEB HACK 给不支持rewrite的服务器配置HTML5 History模式
参考代码：
https://github.com/rafrex/spa-github-pages
去除vue项目地址中的 # 使用History模式
编辑src/router/index.js 添加 mode: ‘history’,
eg.
export default new VueRouter({
mode: 'history',
base: '/vue/',
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{ path: '*', component: NotFoundComponent }
]
})
安装脚手架创建初始项目并发布至GitHub Pages
1.在github创建项目，并拉下来
git clone https://github.com/xxxx.git
2.安装vue-cli
vue-cli文档: https://cli.vuejs.org/zh/guide/
vue-cli v2.x安装方式
npm install --global vue-cli
vue-cli v3.x安装方式
npm install -g @vue/cli
# OR
yarn global add @vue/cli
3.用vue-cli来构建项目
vue init webpack xxxx
新版需要安装@vue/cli-init
根据提示一步步输入
4.切换到项目目录，安装gh-pages到项目中
cd xxxx
npm install gh-pages --save-dev
5.设置package.json
//配置homepage
"homepage": "./",
//配置scripts
"scripts":{
...,
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
}
6.修改配置目录config里的index.js
build: {
...,
assetsPublicPath: './',
}
7.修改.git/config，添加用户名密码
[remote "origin"]
url = https://xxx:xxx@github.com/xxxx.git
8.先提交github
git add .
git commit -m "init"
git push
9.执行编译提交
npm run deploy
执行完后会在github项目里出现gh-pages分支
gh-pages中git配置目录
node_modules\gh-pages.cache\github.com!pingmalu!vue.git.git\config
[core]
repositoryformatversion = 0
filemode = false
bare = false
logallrefupdates = true
symlinks = false
ignorecase = true
hideDotFiles = dotGitOnly
[remote "origin"]
url = https://github.com/pingmalu/test.git
fetch = +refs/heads/gh-pages:refs/remotes/origin/gh-pages
[branch "gh-pages"]
remote = origin
merge = refs/heads/gh-pages