vue项目构建步骤

【vue项目构建步骤整理】


【基础环境】
npm、node、webpack


【安装】
1、用来生成模板的vue工程（脚手架） 【npm install --global vue-cli】
2、初始化项目 【vue init webpack 项目名称】
3、【cd 文件名】
4、安装依赖【npm install】 
5、安装Vuex（专为vue.js应用程序开发的状态管理模式）【npm install vuex —save】
6、安装axios(基于Promise的http请求客户端)【npm install axios —save】
7、安装其它需要的依赖 【npm install 依赖名 —save】


【各配置文件详解】
http://www.cnblogs.com/brandonhulala/p/6057378.html


【启动】
 npm run dev


（其它启动项参见package.json文件）


【修改配置】
1、添加https.js文件
import axios from 'axios';
/* eslint-disable */
const axiosInstance = axios.create({
    // baseURL: 'http://120.26.50.11',
    headers: {
        'Content-Type': 'application/json; charset=UTF-8'
    },
    withCredentials: true,//是否是跨域请求
    timeout: 5000,
});


export default axiosInstance;
[详见：http://www.jianshu.com/p/df464b26ae58]


在main.js添加对应配置
import axiosInstance from './https'
Vue.prototype.$http = axiosInstance;


[使用]
this.$http.get('../static/language/En/common.json').then((data) => {
      
    });


this.$http.post('url' , param).then((data) => {
      
    });


2、配置jquery
在main.js引入
import jquery from 'jquery'
Vue.prototype.$ = jquery;


在webpack.base.conf.js配置
var webpack = require("webpack")
plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            jquery: "jquery",
            "window.jQuery": "jquery"
        })
    ],


3、引入element-ui等 【npm install element-ui --save】
在main.js加载
import Element from 'element-ui';
import 'element-ui/lib/theme-default/index.css'
Vue.use(Element);
详情查看：http://element.eleme.io/#/zh-CN/component/quickstart


【配置端口号】
在dev-server.js文件
var port = process.env.PORT || 1234


【配置api接口】
在https.js文件
baseURL: 'http://120.26.50.11'


【关闭eslint】
在webpack.dev.conf.js注释掉相关配置