一：项目总结
这次的项目开发过程中，对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文件扔到服务端。
网友评论