柚子快报邀请码778899分享：Vue
相关资料地址
官网： https://cn.vuejs.org/
官网教程： https://cn.vuejs.org/v2/guide/
官网API： https://cn.vuejs.org/v2/api/
王树东FE10资料： https://github.com/itguide/fe10
(对应视频资源： 链接：https://pan.baidu.com/s/1nP-eD4XEH2nG1uABhsPvuw 密码：w0ve)
杨杰的vue讲课视频资料：
链接：https://pan.baidu.com/s/190SMYEFqHHKgzgI7jgSOKQ 密码：5Wg3
路由：
https://router.vuejs.org/zh-cn/
全局方法和属性设置
1. 在main.js 同级目录下新建 utils.js （名字可改）
exports.install = function (Vue, options) {
// 服务器信息记录
Vue.prototype.KEY_SERVER_INFO = "KEY_SERVER_INFO";
// 根据保存的服务器信息生成HTTP前缀
Vue.prototype.buildHttpPrefix = function () {
var url = "http://192.168.1.111:8080";
return url;
};
};
2. 在 main.js 导入组件
import utils from './utils';
Vue.use(utils); //将全局函数当做插件来进行注册
3. 组件中正常使用此属性和方法
this.KEY_SERVER_INFO
请求资源 axios
作用就是请求 后台数据 的一种方式， Vue中推荐用这个库来使用
https://www.npmjs.com/package/axios
// axios 提供的请求数据的变量
// get 代表是采用GET方式获取数据
//
axios.get('http://csit.top/api_cat.php')
.then(function (aaa) { // 数据正常的就会执行这里
// 返回的数据是在 data 属性中
console.log(aaa.data);
})
.catch(function (error) { // 出现错误的时候，执行这里的代码
console.log(error);
});
开发环境 VSCode
自动提示插件： Vetur
Vue 开发工具
https://github.com/vuejs/vue-devtools\
vue调试工具之 vue-devtools的安装https://www.cnblogs.com/james23dong/p/8250797.html
路由
文档： https://router.vuejs.org/zh-cn/
Vue 集成开发工具 vue-cli
淘宝镜像配置
http://npm.taobao.org/
你可以使用我们定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
开发脚手架：
https://github.com/vuejs-templates/webpack
cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
这里注意选 n
Use ESLint to lint your code? (Y/n) n
# 安装依赖，走你
$ cd my-project
$ cnpm install
启动项目
ccnpm run dev
项目打包
npm run build
cnpm run build
问题及解决
Uncaught SyntaxError: Use of const in strict mode
【解决办法】将webpack-dev-server版本降为2.7.1重新安装即可
服务器编译打包出错
ModuleBuildError: Module build failed (from ./node_modules/_url-loader@0.5.8@url-loader/index.js):
TypeError: Cannot read property 'context' of undefined
ERROR Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! security-enterprise-admin@2.4.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the security-enterprise-admin@2.4.0 build script.
【解决办法】 进服务器，删除 node_modules 然后，再重新编译即可。
其他资料
awesome-vue 集合了来自社区贡献的数以千计的插件和库。
https://github.com/vuejs/awesome-vue#components--libraries
电商接口转发配置文档
http://csit.top/p/index.php?title=Shop#.E6.8E.A5.E5.8F.A3.E8.BD.AC.E5.8F.91
项目上线资源
https://github.com/itguide/lnmp
git仓库：
https://github.com/vuejs
这个是vue资源相关资源库：
https://github.com/vuejs/awesome-vue
参考文章
如何构建你的第一个Vue.js组件
http://mp.weixin.qq.com/s/3sJdMfbOX76aGZpuDJxXbg
Vue.js——60分钟快速入门
http://www.cnblogs.com/rik28/p/6024425.html
移动端地图
vue-leaflet-mobile
实战案例
今日头条
https://github.com/vueguide/vue-toutiao
云备忘录
https://github.com/maxwelldu/vue-todolist
支持PC和移动端的记事本
Demo地址：
http://blog.gdfengshuo.com/example/notepad/
项目代码地址：
https://github.com/lin-xin/notepad
猿眼电影订票系统
https://github.com/SYSUMonkeyEye/MonkeyEye-FE
实现一个计算器
http://git.oschina.net/jjtHappy/js_caculator
Vue2.0移动版网易云音乐
https://github.com/xinghaiyang1994/vue-music
vue新闻移动端项目
基于vue.js和webpack的的实例项目
https://segmentfault.com/a/1190000009244306
项目地址：
https://github.com/daoket/vue.news
斗鱼项目
https://github.com/lvye1221/vue2-douyu/tree/master/doc
https://github.com/maxwelldu/vue2-douyu
电商项目
https://github.com/maxwelldu/x-shop
https://github.com/itguide/vnshop10 （带课程大纲的）
说明文档
http://csit.top/p/index.php?title=Shop
MiniQQ Vue2实现的MiniQQ功能
https://github.com/jiangqizheng/vue2-MiniQQ
公司首页系统
https://github.com/maxwelldu/HTML5Course20170207/tree/master/20170531/primeAudit
UI组件库
iView：一套基于 Vue 的高质量 UI 组件库
https://www.v2ex.com/t/309935
Tabs 标签页
其中 点击 删除的 事件是 @on-tab-remove， 点击 弹框 可以获取到 点击tab 的下标
饿了么 UI组件库
http://element-cn.eleme.io/
项目打包
npm run build
cnpm run build
在当前目录 dist 目录，项目发布目录
服务器
发布代码必须要放到 Web服务器 中：
Nginx ( 其他服务器： Tomcat, )
http://nginx.org/en/download.html
【注意】下载解压文件到 C盘根目录
双击1次 文件夹中 nginx.exe ，确保 任务管理器 中，只出现 2个 “nginx.exe” 进程
地址转发功能（反向代理）
localhost ===> hope1995.me
用 Editplus 打开 conf/nginx.conf 文件
在48行上，添加如下代码：
location /api/ {
proxy_pass http://hope1995.me:3000/;
}
用任务管理器 关闭 nginx 进程， 重新打开 nginx 服务器
Vue 项目的自动部署
Linux 服务器下的部署代码
配合 Gulp 来使用
cnpm install gulp gulp-sftp --save-dev
http://www.imooc.com/article/75141
https://segmentfault.com/q/1010000017023474?utm_source=tag-newest
项目根目录新建 gulpfile.js 文件，内容如下：
const gulp = require('gulp')
const scp = require('gulp-scp2')
gulp.task('default', () => {
console.log('打包完成，正在上传到服务器')
return gulp.src('./dist/**/*')
.pipe(scp({
host: 'hostname',
username: 'username',
password: 'password',
dest: '/home/admin/',
watch: function(client) {
client.on('write', function(o) {
console.log('write %s', o.destination);
});
}
}))
.on('error', (err) => {
console.log(err)
})
.on('end', () => {
console.log('上传完成')
})
})
项目根目录下，执行命令，上传文件
// 全局安装gulp
cnpm install --global gulp
// 安装 sftp 依赖
cnpm install gulp-scp2
// 编译
npm run build
// 上传
gulp
// 执行 upload 命令
gulp upload
Windows 服务器下的部署代码
参考
https://blog.csdn.net/j_bleach/article/details/53047467
安装 sftp 依赖
// 安装 gulp 依赖
cnpm install gulp
// 安装 gulp 集成工具
cnpm i gulp-cli -g
// 安装 sftp 依赖
cnpm install gulp-ftp --save-dev
更新gulp.js 文件，添加上传方法
// gulp 下的 upload 脚本
const ftp = require('gulp-ftp');
gulp.task('upload', () => {
console.log('打包完成，正在上传到服务器')
return gulp.src('./dist/**/*')
.pipe(ftp({
host: 'xx.xx.xx.xx',
port: 21,
user: 'user',
pass: 'pass',
remote: '/',
watch: function(client) {
client.on('write', function(o) {
console.log('write %s', o.destination);
});
}
}))
.on('error', (err) => {
console.log(err)
})
.on('end', () => {
console.log('上传完成')
})
})
// 执行上传文件
gulp upload
编译加上传
// 编译加上传
npm run build && gulp upload
删除编译结果，并且重新编译加上传
// 删除编译结果，并且重新编译加上传
rm -rf dist && npm run build && gulp upload
遇到的问题及解决
gulp无法运行 - Cannot read property 'apply' of undefined
http://togor.cn/2018/12/12/gulp%E6%97%A0%E6%B3%95%E8%BF%90%E8%A1%8C-Cannot-read-property-apply-of-undefined.html
Vue-Socket
官方文档
https://github.com/MetinSeylan/Vue-Socket.io
无限滚动插件
cnpm i -S vue-infinite-scroll
// 引入无限滚动插件import VueInfiniteScroll from 'vue-infinite-scroll'
图片懒加载功能
安装模块：
cnpm i -S vue-lazyload
安装为Vue的插件：
import VueLazyload from 'vue-lazyload'
Vue.use(VueAxios, Axios)
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'assets/error.png',
loading: require('@/assets/loading-spinning-bubbles.svg'),
attempt: 1
})
使用：
在用到img图片的地方，把:src换成v-lazy: 示例：
资源请求功能
安装模块：
cnpm i -S axios
cnpm i -S vue-axios
main.js
import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, Axios)
组件中使用：
this.axios.get("/static/mock/goods.json").then((data) => {
console.log(data)
})
Vuex 插件安装
cnpm install vuex --save
main.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// const ES6 定义变量，不可更改 ==> 常量
// 定义了一种数据状态，作用：可以在各个组件中，传递数据
var store = new Vuex.Store({
state: { // 状态
num: 100 // 购物车的数量
},
mutations: { // 状态函数，用于更改状态
add (state) { // 函数名， state 当前store中的状态
state.num ++
}
}
})
// 暴露出当前的对象
export default store
新建项目
推荐使用 Vue 官方提供的脚手架 Vue Cli 3 创建项目
# 安装 Vue Cli
npm install -g @vue/cli
# 创建一个项目
vue create hello-world
创建完成后，可以通过命令打开图形化界面
# 打开图形化界面
vue ui
在图形化界面中，点击依赖 -> 安装依赖，然后将 vant 添加到依赖中即可。
参考：
https://youzan.github.io/vant/#/zh-CN/quickstart
练习：
http://panjiachen.github.io/vue-element-admin/#/dashboard
仓库代码
https://github.com/PanJiaChen/vue-element-admin/
然后练手：1、路由相关：根据Ajax获取当前菜单并动态渲染。因为是前后端分离的开发方式，肯定不是动态生成，只是做一个过滤。比如页面实际上有A、B、C菜单。但是用户权限只有A、C菜单，那么页面只显示A、C菜单。
2、Vue的生命周期相关。写一个EChart指令，数据可以模拟，效果是饼图，占据右侧主要内容区域自适应填充100%。
3、把一个JQ插件封装成指令。
4、做一个Dialog方式的Form表单，新增时清空，编辑时读取值，字段：名称（必填），年纪，提交保存时校验。
官网
https://www.webpackjs.com/
使用
cnpm install --save-dev webpack
npm install -save-dev moduleName # -save-dev 的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。
https://www.cnblogs.com/limitcode/p/7906447.html
devDependencies 节点下的模块是我们在开发时需要用的，比如项目中使用的 gulp ，压缩css、js的模块。这些模块在我们的项目部署后是不需要的，所以我们可以使用 -save-dev 的形式安装。像 express 这些模块是项目运行必备的，应该安装在 dependencies 节点下，所以我们应该使用 -save 的形式安装。
cnpm install --save-dev style-loader css-loader url-loader
webpack像模块一样加载所有内容。使用加载程序加载CSS和其他资产文件。安装style-loader，css-loader和url-loader。
npm -S 对应 save
npm -D 对应 save-dev
安装开发服务器
cnpm install --save-dev webpack-dev-server
package.json 中添加，运行脚本添加start脚本以package.json运行开发服务器。通过--config标志设置配置文件。--open执行命令后，使用该标志在浏览器中打开应用程序。
"scripts": { "start": "node_modules/.bin/webpack-dev-server --config webpack.config.js --open"}
npm start
告诉开发服务器将文件dist夹提供给文件。将此添加到的底部webpack.config.js。 // development server options devServer: { contentBase: path.join(__dirname, "dist") }
遇到的问题及解决
ReferenceError: HtmlWebpackPlugin is not defined
在js文件中，没有添加 引入变量
存储
sessionStorage
essionStorage 是HTML5新增的一个会话存储对象，用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据
https://www.cnblogs.com/polk6/p/5512979.html
JS 详解 Cookie、 LocalStorage 与 SessionStorage
https://www.cnblogs.com/minigrasshopper/p/8064367.html
利用 Ajax 下载文件
https://segmentfault.com/a/1190000013729797
this.$ajax({
method:"get",
url:"http://localhost:8081/order/getDoc",
responseType:'blob'
}).then((res)=>{
//这里res.data是返回的blob对象
var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'}); //application/vnd.openxmlformats-officedocument.wordprocessingml.document这里表示doc类型
var downloadElement = document.createElement('a');
var href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href;
downloadElement.download = orderId+'.docx'; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
})
文档生成工具
https://github.com/jsdoc/jsdoc
Vue 脚手架开发应用程序
Vue.js 开发 Electron 桌面应用
http://www.cnblogs.com/lhb25/p/elctron-vue-for-electron-app.html
桌面版修改网页内容
打造你的第一个 Electron 应用
http://www.electronjs.org/docs/tutorial/first-app#electron-development-in-a-nutshell
这不意味着 Electron 是某个图形用户界面（GUI）库的 JavaScript 版本。 相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。
// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法 // 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)
// 创建浏览器窗口
const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } })
// 并且为你的应用加载index.html
win.loadFile('index.html')
http://www.electronjs.org/docs/api/browser-window
win.loadURL('http://localhost:8000/post', { postData: [{ type: 'rawData', bytes: Buffer.from('hello=world') }],
extraHeaders: 'Content-Type: application/x-www-form-urlencoded' })
第一个程序
git clone https://github.com/electron/electron-quick-start
cnpm install
npm run start
打印输出位置是在nodejs后台中
console.log(i++)
打包exe
cnpm install electron-packager --save-dev
package.json
"main": ".electron.js", // 不要忘记设置入口文件
"scripts": {
"electron_build": "electron-packager ./ --platform=win32 --arch=x64 --overwrite"
// 注意事项 electron-packager ./ 会取当前目录下packager.json文件（即当前文件）中main值指向的入口文件
}
npm run electron_build
好慢
Downloading electron-v9.1.0-win32-x64.zip
修改网页内容
mainWindow.contents.on('did-finish-load', async function () {
const key = await contents.insertCSS('html, body { background-color: #f00; }')
contents.removeInsertedCSS(key)
})
win.webContents.on('did-finish-load', () => {
https://www.electronjs.org/docs/api/web-contents
【解决方法】 在 根目录下 preload.js 下操作，可以完全修改 document 的内容。 Year!
资料
electron实现qq快捷登录!
https://www.cnblogs.com/datiangou/p/10130458.html
文档
https://www.w3cschool.cn/electronmanual/i8mc1qkl.html
https://www.w3cschool.cn/electronmanual/cexo1qkn.html
asar pack .\electron-quick-start\ 1.asar
管理员身份认证
柚子快报邀请码778899分享：Vue
发表评论