vue项目开发的一些总结_蓝戒的博客


vue项目开发的一些总结

vue项目开发总结

vue项目搭建使用的官方脚手架:vue-cli;UI库是vux;打包工具使用webpack;状态管理vuex。

1.npm在国内的网络环境下可能会比较慢,解决方案:

使用淘宝镜像:

1>.官方网址:http://npm.taobao.org;

2>.安装,使用config命令:

npm config set registry https://registry.npm.taobao.org 
npm info underscore (如果上面配置正确这个命令会有字符串response)

2.vue项目官方脚手架vue-cli 全局安装 命令行执行 :

npm install -g vue-cli    // 加-g是安装到全局

安装完成以后 可以输入命令 :vue 回车,可以看到针对vue的命令行 vue的命令行

换了国内镜像,安装速度就很快了

3.初始化项目,使用webpack打包

执行命令: vue init webpack vuePic
执行之后将会 自动初始化一个文件夹 :vuePic
初始化项目命令

打开vuePic文件夹 可以看到 已经初始化好了 一个基础的项目: 基础项目目录

package.json 已经默认配置好相关应用

4.解决跨域(用nodejs代理转发请求)

请求写的 url 是 '/api' ,这不是真实的接口地址,
假设你的域名为 http://localhost:8080
那么它请求的地址即为 http://localhost:8080/api
这个 /api 默认是不存在的,现在我们配置一下 nodejs ,让它为我们转发请求

假设,我需要请求的接口的入口为 http://www.xxx.com/api
修改 /config/index.js 配置文件,修改 dev 选项下 proxyTable 的值为如下

proxyTable: {
    '/api': {
        target: 'http://www.xxx.com/',
        changeOrigin: true
    }
},

PS:这里使用的是一个叫 http-proxy-middleware 的 nodejs 中间件,系统已默认为我们集成,直接配置就好了
上面的配置的意思是:遇到从域名和端口以后,以 '/api'开头的 http请求,自动转发到 target (目标)url 地址去,实际请求地址就是 target + '/api'

需要注意的是,假设,你需要请求的接口的入口为 http://www.xxx.com/imapi,而代码里请求的 url 写的是 '/api',则你需要使用 pathRewrite 来进行路径重写,而不是直接改 traget,proxyTable 的值为如下

proxyTable: {
    '/api': {
        target: 'http://www.xxx.com/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/imapi'
        }
    }
},

5.项目引用zeptojs库,手动安装webpack-zepto

安装命令:

npm i webpack-zepto -g  //全局安装  
npm i webpack-zepto --save  //本地安装

--save 和 --save-dev 的区别:
--save 会把依赖包名称添加到 package.json 文件 dependencies 键下
--save-dev 则添加到 package.json 文件 devDependencies 键下

不过这只是它们的表面区别。它们真正的区别是,devDependencies 下列出的模块,是我们开发时用的,它们不会被部署到生产环境。
dependencies 下的模块,则是我们生产环境中需要的依赖。

也可以手动配置:
package.json dependencies键下和devDependencies键下 添加 "webpack-zepto": "0.0.1"

项目中引用:

import $ from 'webpack-zepto'

vue 相关:

vue项目地址:https://github.com/cywcd/vue-piclib
vux UI库:https://vux.li/#/
vux demo地址:https://vux.li/demos/v2/?x-page=v2-doc-home#/demo
vue2.0之axios使用详解:http://blog.csdn.net/binginsist/article/details/65630547
vue 官方脚手架vue-cli:https://github.com/vuejs/vue-cli
vue优秀UI组件库合集:https://github.com/cywcd/book/blob/master/vue-UI.md
vue调试工具devtools:https://github.com/vuejs/vue-devtools

本文固定链接: http://www.webzsky.com/?p=1154 | 蓝戒的博客

cywcd
该日志由 cywcd 于2017年11月14日发表在 javascript 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: vue项目开发的一些总结 | 蓝戒的博客
关键字: , , ,

目前共有 1 条留言 【 访客:1 条, 博主:0 条 】 访客以 1:0 暂时领先博主!

  1. 沙发
    沙拉小王子:

    适合vue入门者学习,赞一个

    2017-11-30 下午 4:58

发表评论


快捷键:Ctrl+Enter
来自的朋友,欢迎您 点击这里 订阅我的博客 o(∩_∩)o~~~
×