相关资料地址
官网教程： 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
淘宝镜像配置
你可以使用我们定制的 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 组件库
Tabs 标签页
<Tabs type="card" closable @on-tab-remove="handleTabRemove"> <TabPane label="标签一" v-if="tab0">标签一的内容</TabPane> <TabPane label="标签二" v-if="tab1">标签二的内容</TabPane> <TabPane label="标签三" v-if="tab2">标签三的内容</TabPane> </Tabs>
其中 点击 删除的 事件是 @on-tab-remove， 点击 弹框 可以获取到 点击tab 的下标
饿了么 UI组件库
项目打包
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