Vue

2018-09-21

几种还不错的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 的移动端组件库

响应式布局

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/

npm install --global vue-cli  // 旧版安装方式

vue-cli v3使用新的方式安装:

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