项目总结及vue资源理解

一:项目总结

这次的项目开发过程中,对vue的安装理解是一个难点,因为我们采用的vue-cli脚手架的形式去开发的,也就是搭建一套vue的环境,在这套环境下去开发,而不用apache,开发完毕直接打包,直接访问。

    vue的路由,这个通过查询资料安装了vue的router依赖。

    怎么使用ajax是个难点,通过查询,可以使用的有resouce和axios,经过查资料说vue-resources不再更新了,vue作者尤大推荐axios。又问了群里的大神,人家也说用axios,所以我们这次也用的axios依赖。但是原生的ajax也是可以使用的。

    因为是在vue自己的环境下进行开发,会自己分配域名,端口号,所以,怎么跨域连接rap获取数据是个难点,这个过程也是在网上查询资料最后知道vue这个框架里有一个config可以配置跨域请求。

在页面开发中,遇到了初始化页面获取数据这类的问题,所以查询了关于vue的实例化生命周期created,mounted。
1346252-eec545a3c62ef0ac.png
和后台对接的时候遇到cookie的问题,这事后台解决的,用了xhrfield这个函数。

二:vue学习相关

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpackBrowserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件

1:vue学习资源:

https://cn.vuejs.org/v2/guide/

2:vue安装:

npm install vue

全局安装 vue-cli

npm install --global vue-cli

创建一个基于 webpack 模板的新项目

vue init webpack my-project

安装依赖

cd my-project

npm install

打开vue项目

npm run dev

打包项目

打包项目之前为了能让项目在本地apache环境好下访问,所以要把my-project\config\index.js里面的assetsPublicPath: '/',改为:assetsPublicPath: './',但是再次用npm run dev打开的时候记得再把这个.去掉。否则会访问不了。报:cant get 的错误。

npm run build (打包项目)

3:引进公共的js css文件

在项目根目录下的index.html文件中加载外部的js或者css文件,注意用./的形式,否则控制台会语法报错。

<link rel="stylesheet" href="./static/css/mobile_toolkit.css">

<script src="./static/js/size_adaptive.js">

*****assets文件夹与static文件夹的区别**

区别一:assets文件是src下的,所以最后运行时需要进行打包,而static文件不需要打包就直接放在最终的文件中了

区别二:assets中的文件在vue中的template/style下用../这种相对路径的形式进行引用,在script下必须用@import的方式引入,

而static下的文件在.vue中的任何地方都只要使用../这种相对路径的方式引入。

4:给Vue单页应用设置标题

a:安装插件:npm install vue-wechat-title --save

b:main.js 导入插件

import VueWechatTitle from 'vue-wechat-title' // 单页面的title标签设置

Vue.use(VueWechatTitle)

c:APP.vue 里面把router相关的地方改为:

<router-view v-wechat-title="$route.meta.title"></router-view>

d:router/index.js 里面每个页面的路由加上:meta: { title: '蓝景丽家线上服务中心' }

5:设置Vue移动端项目使用手机预览调试

a:WIN+R,输入cmd回车,打开命令提示符,输入ipconfig,查看本地IPv4;

b:config/index.js 里面 dev: {}里面的host改为:host: '192.168.191.1', //默认为localhost

c:重新npm run dev

这种用ip的方式访问,移动端显示是根据代码的变化而及时变化的,只要代码改变执行ctrl+s以后,不用再进行移动端刷新,页面就能立即变化。 开发完了上线的时候可以把这个再改成 localhost。

5:语法相关和ng一样的。

6:vue的组件这块比较复杂,涉及父子组件数据传输props $emit 数据分发:slot插槽 。。。

7:修改build的目录名称

当执行npm run build 的时候,会在项目根目录下生成一个文件夹dist,部署的时候可以将static和index.html直接扔到服务器,如果想把dist这个文件夹整体放到服务器上,但是想改变dist文件名,需要在config/index.js里面把对应的名称改掉;

index: path.resolve(__dirname, '../query/index.html'), //query最开始为dist

assetsRoot: path.resolve(__dirname, '../query'),//query最开始为dist

7:vue项目部署

将打包出来的资源,基于Vue-Cli的一般是dist目录下有static目录和index.html文件,可以直接将这两个文件扔到服务端。有时候,我们会直接将dist文件扔到服务端。

作者:杨立军
链接:https://www.jianshu.com/p/0154b90e7c7e
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,904评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,581评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,527评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,463评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,546评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,572评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,582评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,330评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,776评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,087评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,257评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,923评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,571评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,192评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,436评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,145评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2 352

推荐阅读更多精彩内容