vue 开发系列（一） vue 开发环境搭建

 

概要

目前前端开发技术愈来愈像后台开发了，有一站式的解决方案。

1.JS包的依赖管理像MAVEN。

2.JS代码编译打包。

3.组件式的开发。

vue 是一个前端的一站式的前端解决方案，从项目的初始化，组件的开发，项目编译都提供了完整的开发工具。

vue 和 angular，react 比较的，我的以为vue 开发模式有一下几个特色。

1.入门简单

2.性能优异

3.文档丰富

4.现成可用的UI方案也不少。

好比 vue.ydui.org 

开发环境搭建

1.建立vue项目

1.node js 生成项目，编译项目。

2.hbuilder 开发环境

1.下载安装node js

http://nodejs.cn/download/

2.安装 VUE CLI 

vue cli 是一个脚手架工具，用于生成一个基础的vue应用。

npm install vue-cli -g

3.新建一个vue 项目

咱们建立一个项目名为vmobile  的手机项目。

vue init webpack vmobile 

4.安装vue 项目所须要的依赖包

进入到vmobile 目录，在命令行下执行命令

npm install --registry=https://registry.npm.taobao.org这个命令 是将项目依赖的js下载到本地，java程序员能够类比maven 更新jar包。

5.将建立的项目跑起来。

在命令行下执行 命令 vue run dev,执行后会自动打开一个浏览器，咱们就能够看到新建立的项目了。

2.使用hbuilder编辑项目

hbulider 是一个和相似 webstorm 的开发工具。

这个工具的做用：

1.编辑代码

2.将咱们上面建立的程序转换成手机应用。

3.将手机程序打包成应用程序，咱们能够使用hbuilder 提供的 h5+ 提供的JS API 访问手机硬件。

3.代码结构

 

打包运行配置：

红框部分是生成的 webpack 打包的代码。

咱们须要修改的部分：

编辑 index.js文件

这里能够看到，咱们在执行 命令 npm run build 命令时，会将项目进行编译，这个时编译后输出的目录和首页根文件路径。

这里能够看到有一个端口配置，这里配置成8088。

这个端口是 执行 命令 npm run dev 在浏览器调试 启动的端口，在线调试很是方便，程序员很容易进行在线调试，只要修改项目，那么页面将自动刷新。

大大提升开发效率。

这个代理设置，是客户端访问后端数据用的，主要是防止访问后端数据出现跨域的问题，

像我这个配置的意思是：

代码访问数据的时候 访问 路径是 http://localhost:8088/jsaas 那么会将请求转发到 http://localhost:8080/jsaas 这样就解决了跨域的问题。

包依赖配置：

这个咱们能够看package.json 文件。

dependencies :表示开发时须要依赖的js 的版本。

vue : "^2.5.7” ，这个表示当 咱们在执行 npm run install 的时候，项目会依赖 版本 大于或等于 2.5.7 的JS.

devDependencies :这个表示咱们开发时须要用到的js，意思是好比打包 webpack 须要的版本。

手机打包配置文件：

manifest.json 这个文件是hbuilder 打包项目须要使用到的配置文件，好比须要访问原生的API模块，开机屏幕配置等等。