说明前端 vue 框架不知不觉就这样火起来了,生态圈也是逐渐在完善,后台也是彻底分离了数据给前端,就类似ios 和安卓客户端一样,令人惊奇的是也拥有了前端路由这个概念,更令人兴奋的是用 webpack 打包解决了包和包依赖的问题。二话不说,先上个例子。
1.vue + webpack 初始化开发环境
初始化环境首先要全局安装nodejs,webpack环境,至于怎么安装node 环境相信网上有很多教程,webpack 的话可以通过npm安装(也可以通过淘宝镜像配置安装cnpm)。
安装初始化
vue init webpack vue-demo
vue-demo 是你要起的项目名字,它会新建一个vue-demo的文件夹来存放初始化的一些文件。下面会提示项目名字,如果不填直接回车,就是默认的名字。
Paste_Image.png项目描述:这里可以填写一些对于这个项目的基本关键描述,例如:饱了么 app
Paste_Image.png项目作者:
Paste_Image.png是否安装vue-router 路由:选择 yes
Paste_Image.png是否开启ESLint 代码检验:
解析:开启后可能多一个空格或少一个符号都会编译错误
建议:真正了解后再开启,第一次学的话可以选no,真正项目建议开启
是否用karma 测试:no
建议:了解后再开启,不然配置的第一个坑都爬不过去
Nightwatch 测试no
完成后提示:
Paste_Image.png通俗话解析:
1.切换到 vue-demo 目录下
2.通过npm 安装相关的配置
3.启动项目
Paste_Image.png执行安装后
运行官方的例子项目
npm run dev
会自动开启一个端口,自动打开浏览器预览。
Paste_Image.png2.文件结构的一些了解
导入的一些第三方工具配置,package.json
Paste_Image.pnghtml入口文件文件——> index.html
Paste_Image.pngmain.js 引入相关模块
Paste_Image.png引入模版文件
Paste_Image.png入口路由 ./router/index.js
Paste_Image.png源码分析:
import Vue from 'vue' ---->引入vue模块
import Router from 'vue-router' ----->引入路由模块
import Hello from '@/components/Hello' ----->引入模版,前面别名,后面路径
Vue.use(Router)
export default new Router({
routes: [
{
path: '/', ---->路由访问路径
name: 'Hello', ---->名字
component: Hello ---->模版路径配置的别名,看第三行代码
}
]
})
首页模版内容,试下修改里面的内容,再访问看是否有什么变化
Paste_Image.png
3.vue 路由配置
1.新建页面模版
2.导入模版文件
3.设置访问路由,以及路由对应的页面模板
Paste_Image.png新建About.vue 页面模板文件
Paste_Image.pngindex.js 导入页面模板,设置访问路由
启动访问
访问你刚刚新添加的路由路径
Paste_Image.png
这里抛出一个疑问,为什么我的About.vue 里面只有一行About,而显示却多了个V图标呢?
详情看App.vue 里面的代码,欢迎评论讨论。
4 源码打包
激动人心的一刻来临了,通过打包后的文件,通过编译后把build 文件夹和index.html 拷贝到服务器即可。
Paste_Image.pngPaste_Image.png
然后把你的文件拷贝到你的服务器上
Paste_Image.png Paste_Image.pngPaste_Image.png
总结:
要有一颗不怕折腾的心。
网友评论