前言
vue.js有著名的全家桶系列,包含了vue-router,vuex, vue-resource,再加上构建工具vue-cli,就是一个完整的vue项目的核心构成。
具体的作用
nodejs 就是为了安装其它的
webpack 作用如下图
vue-cli 这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-dev-server的支持,相当于启动了一个请求服务器,给你搭建了一个测试环境,只关注开发就OK
Node.js
下载安装就行了下载网址
或者
用brew安装 先安装brew
1 | /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" |
替换及重置Homebrew默认源
1 | //替换brew.git: |
安装Node.js
1 | brew install nodejs |
macOS 10.14 报错 chown: /usr/local: Operation not permitted解决方法 卸载重新安装
1 | /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)" |
重新安装
1 | /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" |
查看node版本
1 | node -v |
查看NPM版本
1 | npm -v |
安装后就可以用npm命令了
cnpm就是npm的国内淘宝镜像 所有npm的命令 直接换成cnpm就行了
1 | sudo npm install -g cnpm --registry=https://registry.npm.taobao.org |
也可以直接指定node.js的镜像地址 就不用使用cnpm也能使用淘宝镜像
1 | //设置镜像地址 |
查看已安装的包
1 | npm list --depth 0 |
--depth 0
是只显示第一层级的包 如果是1的话就会显示两个层级
安装Vue Cli
卸载旧版本
1 | npm uninstall vue-cli -g |
安装新版本
1 | npm install -g @vue/cli |
检查其版本是否正确 (3.x)
1 | vue --version |
Python
https://www.python.org/downloads/
有的库需要使用到Python
查看版本
1 | python --version |
创建项目
使用控制台创建
1 | vue create hello-world |
使用图形化界面创建
1 | vue ui |
运行项目
1 | npm run serve |
运行项目后 在浏览器的控制台报错
Invalid Host/Origin header
解决方法:
在项目的根目录新建一个vue.config.js
文件
1 | module.exports = { |
用户的配置文件会和默认的配置文件合并 所以不用担心系统默认配置要再配置一遍
添加VueX和Vue-router
package.json
1 | { |
注意
cli-plugin
相关的插件版本要一致。
给一个完整的方便对比
1 | { |
添加路由设置
/src/router/index.js
1 | import Vue from "vue"; |
添加VueX配置
/src/store/index.js
1 | import Vue from "vue"; |
App.vue
1 | <template> |
main.js中添加
1 | import Vue from "vue"; |
打包配置
修改打包位置
1 | module.exports = { |
打包不生成map文件
项目根目录创建vue.config.js
1 | module.exports = { |
文件带时间戳
1 | const Timestamp = new Date().getTime(); |
打包后页面空白
Vue Cli3已经没有了webpack.config.js
文件。取而代之的是创建一个vue.config.js
文件。
vue.config.js
解决build后直接访问html白板的问题
1 | // 这里的webpack配置会和公共的webpack.config.js进行合并 |
官网是这样介绍的https://cli.vuejs.org/zh/config/#configurewebpack
webpack拷贝插件
copy-webpack-plugin
1 | npm install --save-dev ffmpeg-static |
简单示例
1 | const path = require("path"); |
跨域代理配置
在项目的根目录新建一个vue.config.js
文件
1 | module.exports = { |
假如我们请求这样写
1 | this.axios |
就能在本地请求到http://www.psvmc.cn/userlist.json
了
注意
打包后直接访问接口是无法访问的,这就要求服务器上做Nginx反代。
ESLint配置
修复代码
1 | npm run lint --fix |
IDEA的设置中可以勾选如下的操作,这样保存时会自动修复。
ESLint配置
.eslintrc.js
配置
1 | module.exports = { |
规则
0 或 'off'
: 关闭规则。1 或 'warn'
: 打开规则,并且作为一个警告,字体颜色为黄色(并不会导致检查不通过)。2 或 'error'
:打开规则,并且作为一个错误 ,色体颜色为红色(退出码为1,检查不通过)。
或者
package.json 中配置
1 | { |
但是同时只能配置一处,两处都配置会有问题。
@不能跳转
JS中
JS引用中@不能点击跳转
(1) File=>Settings=>Webpack=>选择Automatically选项。
(2) 项目根目录添加jsconfig.json
文件
1 | { |
新版本的Vue Cli创建项目会自动生成该文件
内容如下
1 | { |
CSS中
1 | @import "~@/assets/less/card.less"; |
注意CSS中要用~@
,而不是@
。
Git忽略文件
.gitignore
1 | .DS_Store |
关闭拼写检查
搜索Typo找到如下配置 取消勾选即可。
其他库
HTTP请求-axios
安装
1 | npm install --save axios vue-axios |
main.js
中添加
1 | import Vue from 'vue' |
然后页面中就可以这样请求
1 | Vue.axios.get(api).then((response) => { |
其实 上面的就相当于
安装
1 | npm install --save axios |
main.js
中添加
1 | import axios from 'axios' |
然后页面中就可以这样请求
1 | Vue.axios.get(api).then((response) => { |
Cookies
因为项目原因才用的Cookie 推荐使用localStorage
用VueX来缓存登录用户的时候,如果页面刷新后,VueX的缓存也会清空 ,所以我们还得用Cookie来保存
安装
1 | npm install vue-cookies --save |
配置
1 | import Vue from "vue"; |
使用
1 | this.$mycookie.addcookie("loginuser",JSON.stringify(data.obj)); |
我这里封装是为了设置开发和上线后的域不同,所以封装了一下
SEO方案
常用的解决方案有三种:
- 页面预渲染
- 服务端渲染
- 路由采用h5 history模式
而应用到的技术也是有很多,大体上我总结了四个,也是比较常用的:
ssr,vue官方文档给出的服务器渲染方案,这是一套完整的构建vue服务端渲染应用的指南,具体
参考网站
vue-meta-info,这个是针对单页面的meta SEO的另一种思路,
参考网站
nuxt 简单易用,
参考网站
phantomjs 页面预渲染,具体
参考网站
而市场上依靠vue做出来的唱功案例还是很多的:
那么他们是如何做优化的呢?我们通过分析,总结以下几点
1) bilibili做了基本的seo优化,比如
TDK描叙详细。
提升网页加载速度:对外联css,以及js使用了延迟加载以及dns-prefetch,preload。
外联较多,关键词排名高。
2) 掘金网站使用了vue-meta-info 管理网站的meta,应该配合使用了prerender-spa-plugin 对SEO进行了优化