一:项目总结
这次的项目开发过程中,对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。
和后台对接的时候遇到cookie的问题,这事后台解决的,用了xhrfield这个函数。
二:vue学习相关
在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 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
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。