1.Vue.js介绍
-
MVVM框架
MVVM
-
什么是Vue.js
1，它是一个轻量级的MVVM框架
2，数据驱动+组件化的前端开发
3，社区完善（GitHub，论坛，聊天室，Twitter） -
对比Angular、React
Vue.js更轻量，gzip后大小只有20K+
Vue.js更容易上手，学习曲线平稳
吸取两家之长，借鉴了angular的指令和React的组件化 -
数据驱动
数据驱动
Vue.js通过Directives指令对DOM做一层封装，当数据发生改变，会通知指令去修改对应的DOM，数据驱动DOM变化，DOM是数据的一种自然映射；Vue.js还会对操作做一些监听，当修改视图时，Vue.js监听到这些变化，从而改变数据，形成了数据的双向绑定。
-
数据响应原理
数据响应原理
-
组件化
扩展HTML元素，封装可重用的代码 -
组件设计原则
页面上每个独立的可视、可交互区域视为一个组件
每个组件对应一个工程目录，组件所需的各种资源在这个目录下就近维护
页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面
更多Vue基础知识可以参考慕课网wiki：Vue.js 教程
2.准备工作
2.1 Vue CLI
Vue的脚手架工具，帮助我们写好Vue.js基础代码的工具，能帮我们搞定目录结构、本地调试、代码部署、热加载、单元测试等工作。
文档地址:Vue CLI 中文文档
- 安装Vue CLI(3.0以上版本)
#前提是已安装了node，查看node版本，确认已安装node,如未安装，自行百度
node -v
#安装Vue CLI (Mac系统安装操作涉及权限,需要在前面加sudo,下同)
npm install -g @vue/cli
# OR
yarn global add @vue/cli
#运行这个命令查看版本,验证是否安装成功
vue --version
- 创建一个项目
#运行以下命令来创建一个新项目eleme-vue-cube
vue create eleme-vue-cube
创建项目
- 启动项目
#进入目录
cd eleme-vue-cube
#启动项目
npm run serve
- 项目文件介绍
|-- eleme-vue-cube
|-- .browserslistrc
|-- .editorconfig
|-- .eslintrc.js
|-- .gitignore //指定文件无需提交到git上
|-- README.md
|-- babel.config.js //使用一些预设
|-- package-lock.json //版本管理使用的文件
|-- package.json //项目描述及依赖
|-- postcss.config.js
|-- node_modules //项目依赖(对webpack进行了封装)
|-- ...
|-- public
| |-- favicon.ico //网站图标
| |-- index.html //入口html文件
|-- src //项目源码
|-- App.vue
|-- main.js //入口js文件
|-- assets
|-- logo.png
|-- components
|-- HelloWorld.vue
-
webpack打包
webpack
详细了解请参阅:webpack中文文档
2.2 cube-ui
- 安装cube-ui
在vue-cli3.0的项目里，直接使用vue add cube-ui就可以安装;
安装cube-ui
后编译(post-compile):不去使用cube-ui编译后的代码,直接引用它的源码,用我们的应用去编译这块儿代码;好处是可以减少整个构建包的体积.
官方文档地址:cube-ui中文文档 或 Cube-UI中文文档
2.3 api接口mock
通过data.json文件模拟后台数据
//向vue.config.js中添加:
// 1.引入data.json文件(在项目根目录)，获取对应的数据
const appData = require('./data.json')
const seller = appData.seller
const goods = appData.goods
const ratings = appData.ratings
//2.module.exports = {}中添加devServer
devServer: {
before (app) {
app.get('/api/seller', function (req, res) {
res.json({
errno: 0,
data: seller
})
})
app.get('/api/goods', function (req, res) {
res.json({
errno: 0,
data: goods
})
})
app.get('/api/ratings', function (req, res) {
res.json({
errno: 0,
data: ratings
})
})
}
}
devServer表示本地服务器，里面有个before方法，参数是app，可以在这里面定义接口，例如里面定义的app.get('/api/seller'，启动服务后，用浏览器访问http://localhost:8080/api/seller，可以在页面看到接口返回的json数据。
2.4 项目资源准备
- 1.删除了原来项目的src/assert目录、删除了HelloWorld.vue
- 2.public/index.html 修改,锁定禁止缩放(maximum-scale=1.0,minimum-scale=1.0,user-scalable=no)
- 3.新建src/common目录 用于存放资源
- 4.新建src/common/fonts 存放图标字体相关文件
- 5.新建src/common/stylus 存放base.styl(定义的基础样式),icon.styl(字体图标的一些样式 引用了fonts下面的文件),index.styl(内部import icon和base),mixin.styl(引用到cube-ui中的styl),variable.styl(引用了cube-ui的变量 并定义背景色和主题色)
//修改后项目路径src下
|-- src //项目源码
|-- App.vue
|-- main.js //入口js文件
|-- common //公共资源
|-- fonts //字体图标相关文件
|-- stylus //样式
|-- components
//common文件夹及源码地址见文末
4.组件开发
html和css部分暂不详述
4.0 组件注册
项目中使用了Babel 和 webpack 的模块系统的情况下，Vue官方推荐我们创建一个 components 目录，并将每个组件放置在其各自的文件中。
然后你需要在局部注册之前导入每个你想使用的组件。例如，在一个假设的 ComponentB.js 或 ComponentB.vue 文件中：
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
components: {
ComponentA,
ComponentC
},
// ...
}
现在 ComponentA 和 ComponentC 都可以在 ComponentB 的模板中使用了。
更多组件注册方式，可查看文档：组件注册-Vue.js
4.1 头部组件相关技术点
4.1.1 axios
请求数据使用了axios（类似ajax），一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。github地址：axios/axios，中文文档地址：翻译比较到位的axios中文文档
4.1.2 create-api
点击弹出弹窗层，使用了create-api，一个能够让 Vue 组件通过 API 方式调用的插件。
使用方法：先注册后使用。文档地址：Cube-UI中文文档 create-api 模块
4.2 Tab组件（另行补充）
4.3 商品页面（另行补充）
4.4 商品详情（另行补充）
4.5 评价和商家页面（另行补充）
5.打包部署
使用命令 npm run build 编译，生成dist文件夹；将整个项目文件上传到阿里云，进入项目根路径下，执行 nohup node prod.server.js &，后台启动。
[root@pliuServer eleme-vue-cube]# nohup node prod.server.js &
[1] 13688
[root@pliuServer eleme-vue-cube]# nohup: ignoring input and appending output to ‘nohup.out’
写在最后：
本人毕竟是一个Java后端，由于时间关系，有些地方没有深入，后续会再次补充；代码已上传至码云仓库，点击可查看完整代码。
感谢慕课网ustbhuangyi老师的课程：Vue.js2.5+cube-ui重构饿了么App，受益匪浅。
网友评论