【vue】vue-cli 2.x安装及快速入门(1)

前期工作：

1、检查node、npm 是否安装

      node -V

      npm -V

2、安装vue-cli 脚手架工具

      npm install -g vue-cli

      

3、创建项目

      vue init webpack 项目名称（不能有大小写）

      一系列操作后、会出现

      

      cd 项目名称

      npm install

      npm run dev

      项目跑成功

 

文件夹解析

├── README.md                       // 项目说明文档
├── node_modules                    // 项目依赖包文件夹
├── build                           // 编译配置文件，一般不用管
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config                          // 项目基本设置文件夹
│   ├── dev.env.js              // 开发配置文件
│   ├── index.js                    // 配置主文件
│   └── prod.env.js             // 编译配置文件
├── index.html                      // 项目入口文件
├── package-lock.json           // npm5 新增文件，优化性能
├── package.json                    // 项目依赖包配置文件
├── src                             // 我们的项目的源码编写文件
│   ├── App.vue                 // APP入口文件
│   ├── assets                      // 初始项目资源目录，回头删掉
│   │   └── logo.png
│   ├── components              // 组件目录
│   │   └── Hello.vue           // 测试组件，回头删除
│   ├── main.js                 // 主配置文件
│   └── router                      // 路由配置文件夹
│       └── index.js            // 路由配置文件
└── static                          // 资源放置目录
我们绝大多数的操作，就是在 src 这个目录下面。默认的 src 结构比较简单，我们需要重新整理。
另外 static 资源目录，我们也需要根据放置不同的资源，在这边构建不同的子文件夹。

自己配置Src 文件夹：
├── App.vue                         // APP入口文件
├── api                             // 接口调用工具文件夹
│   └── index.js                    // 接口调用工具
├── components                      // 组件文件夹，目前为空
├── config                          // 项目配置文件夹
│   └── index.js                    // 项目配置文件
├── frame                           // 子路由文件夹
│   └── frame.vue                   // 默认子路由文件
├── main.js                         // 项目配置文件
├── page                                // 我们的页面组件文件夹
│   ├── content.vue             // 准备些 cnodejs 的内容页面
│   └── index.vue                   // 准备些 cnodejs 的列表页面
├── router                          // 路由配置文件夹
│   └── index.js                    // 路由配置文件
├── style                           // scss 样式存放目录
│   ├── base                        // 基础样式存放目录
│   │   ├── _base.scss          // 基础样式文件
│   │   ├── _color.scss     // 项目颜色配置变量文件
│   │   ├── _mixin.scss     // scss 混入文件
│   │   └── _reset.scss     // 浏览器初始化文件
│   ├── scss                        // 页面样式文件夹
│   │   ├── _content.scss       // 内容页面样式文件
│   │   └── _index.scss     // 列表样式文件
│   └── style.scss              // 主样式文件
└── utils                           // 常用工具文件夹
    └── index.js                    // 常用工具文件

一、sass配置方法：

我们的样式，都将从 src/style/style.scss 这个文件中引用，因此，在 App.vue 这个文件中，直接引用 ./style/style 即可

1、安装sass的依赖包

    npm install --save-dev sass-loader

    //sass-loader依赖于node-sass

    npm install --save-dev node-sass

2、在build文件夹下的webpack.base.conf.js的rules里面添加配置

    {
  		test: /\.sass$/,
  		loaders: ['style', 'css', 'sass']
    }

3、在APP.vue中修改style标签

    <style lang="scss">
	    @import "./style/style";
    </style>

二、less配置：

1、npm install less less-loader --save-dev

2、build 目录下,webpack.base.conf.js打开，找到module下的rules：
    {
        test: /\.less$/,
        loader: "style-loader!css-loader!less-loader"
     }


3、去 APP.vue 页面，
    <style lang="less"></style>

然后运行 npm run dev

axios 配置方法 ：

1、npm install axios

2、新建一个src/api/index.js ,内容如下 ：

    // 配置API接口地址

    var root = 'https://cnodejs.org/api/v1'

    // 引用axios

    var axios = require('axios')

    // 自定义判断元素类型JS

    function toType (obj) {
        return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
    }

    // 参数过滤函数

    function filterNull (o) {
        for (var key in o) {
            if (o[key] === null) {
                delete o[key]
            }
            if (toType(o[key]) === 'string') {
                o[key] = o[key].trim()
            } else if (toType(o[key]) === 'object') {
                o[key] = filterNull(o[key])
            } else if (toType(o[key]) === 'array') {
                o[key] = filterNull(o[key])
            }
        }
        return o
    }

    /*
        接口处理函数
        这个函数每个项目都是不一样的，我现在调整的是适用于
        https://cnodejs.org/api/v1 的接口，如果是其他接口
        需要根据接口的参数进行调整。参考说明文档地址：
        https://cnodejs.org/topic/5378720ed6e2d16149fa16bd
        主要是，不同的接口的成功标识和失败提示是不一致的。
        另外，不同的项目的处理方法也是不一致的，这里出错就是简单的alert
    */

    function apiAxios (method, url, params, success, failure) {
        if (params) {
            params = filterNull(params)
        }
        axios({
            method: method,
            url: url,
            data: method === 'POST' || method === 'PUT' ? params : null,
            params: method === 'GET' || method === 'DELETE' ? params : null,
            baseURL: root,
            withCredentials: false
        })
        .then(function (res) {
            if (res.data.success === true) {
                if (success) {
                    success(res.data)
                }
            } else {
                if (failure) {
                    failure(res.data)
                } else {
                    window.alert('error: ' + JSON.stringify(res.data))
                }
            }
        })
        .catch(function (err) {
            let res = err.response
            if (err) {
                window.alert('api error, HTTP CODE: ' + res.status)
            }
        })
    }

    // 返回在vue模板中的调用接口

    export default {
        get: function (url, params, success, failure) {
            return apiAxios('GET', url, params, success, failure)
        },
        post: function (url, params, success, failure) {
            return apiAxios('POST', url, params, success, failure)
        },
        put: function (url, params, success, failure) {
            return apiAxios('PUT', url, params, success, failure)
        },
        delete: function (url, params, success, failure) {
            return apiAxios('DELETE', url, params, success, failure)
        }
    }

3、去main.js 绑定 api/index.js文件

    // 引用API文件

    import api from './api/index.js'

    // 将API方法绑定到全局

    Vue.prototype.$api = api

去 config - index.js

找到 proxyTble:{}

proxyTable: {
    '/api': {
        target: 'https://cnodejs.org', // 你接口的域名
        secure: false,
        changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
        pathRewrite: {
            '^/api': ''
         }
    }
},

4、在main.js里引用 

    // 引用 axios

    import axios from 'axios'

    Vue.prototype.$linkage = axios

打包 npm run build ,如果你编译时间非常长，去掉map文件：

/config/index.js 文件，找到其中的productionSourceMap: true,

修改为productionSourceMap: false,

然后重新运行打包；

qs 安装（其实我也不知道qs 是个啥）

// 把Request PayLoad 转成 Form Data

npm install qs --save-dev

   在index.js里声明：

切记：页面一定要安装 babel-polyfill ！！ 原因是：为了兼容低版浏览器！

npm install babel-polyfill -S

在main.js 里引入：import “babel-polyfill”;

在build-webpack.base.conf.js里 ：

替换到entry部分 

entry: {

    // app: './src/main.js'

    app: ["babel-polyfill", "./src/main.js"]
},

 

npm run dev运行后自动打开浏览器
 修改项目目录下/config/index.js文件