vue-cli脚手架

一、安装vue-cli

        安装vue-cli需先安装node,可在命令行工具输入npm -v 查看是否已经安装node 和npm

        安装vue-cli命令：npm install vue-cli -g

        安装完成后可输入命令 vue -V查看vue-cli版本号。

二、使用创建vue项目

        vue init 模板名称 项目名称 ：

                说明：vue-cli官方为我们提供了5中模板，其中webpack是最常用的模板。

                其他四种模板：

                       webpack-simple：一个简单webpack+vue-loader的模板，不包含其他功能。

                        browserify：一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元                           检测。

                        browserify-simple：一个简单Browserify+vueify的模板，不包含其他功能。

                        simple：一个最简单的单页应用模板。

        输入命令后，会询问我们几个简单的选项，我们按需填写就好：

                Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大  写。

                Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。

                Author：作者，如果你有配置git的作者，他会读取。

                Install vue-router? 是否安装vue的路由插件，Y代表安装，N无需安装，下面的命令也     是 一样的。

                Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。

               setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha。

                Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试。

                Should we run npm install for you after the project has been created? (recommended)                 npm 这一步会询问你使用npm安装还是yarn安装包依赖,若用yarn下载需先安装yarn。

 当出现图片上的文字是表示项目创建成功

To get started：项目启动步骤

        1.命令行输入：cd 项目名称

        2.命令行输入：npm run dev

  出现如下画面说明项目启动成功

       

 接着到浏览器输入地址 http://localhost:8080 就可看到页面

如果需要项目启动自动打开浏览器，则在项目目录找到package.jsonw文件，然后打开该文件，在文件中的script脚本命令的dev行加入--open，如下图所示

 三、vue-cli项目结构

四、axios及跨域处理:        

Axios是一个基于Promise的 HTTP 库，可以用在浏览器和node.js 中.

功能

浏览器端发起XMLHttpRequests请求

node层发起http请求

支持Promise API

拦截请求和响应

转换请求和响应数据

取消请求

自动转换JSON数据

客户端支持防御XSRF（跨站请求伪造）

下载axios:

        npm install axios --save 或 npm install axios -S

在main.js引入axios:

        import axios from 'axios'

设置axios到vue原型中，之后使用axios格式：this.$http.get("url").then(res=>{})：

        Vue.prototype.$http = axios;

跨域：

        在config包下的index.js中添加如下图片代码