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的命令行 

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

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'

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