vue-cli+vuex+scss+element-ui+axios+webpack搭建超简洁完整项目+IIS部署（入门全家桶）

从vue-cli脚手架搭建,到实际项目中用到，比如vuex状态管理；css预编译语言scss；还可能会借助ui框架element-ui；以及与服务端数据交互axios；还有部署到服务器端；才是完整的项目流程，刚入门在这里耗了比较多时间，这里搭建个最简洁的全家桶方便大家学习

可以跳过下面步骤直接下载使用：
https://github.com/MVPVP/ypt201
使用步骤：
下载代码=》安装依赖 npm install =》运行程序 npm run dev =》浏览器中打开 http://localhost:8080

一、安装vue-cli；

1、npm install -g vue-cli
全局安装vue-cli；

2、npm install -g vue-cli
生成ypt201项目名项目文件，默认回车，会安装vue-router路由和EsLint帮助我们检查Javascript编程时的语法格式等；

3、cd ypt201
进入ypt201文件目录下

4、npm install
安装依赖,ypt201文件目录下生产node_modules文件；

5、npm run dev
vue-cli项目跑起来，并在浏览器打开（注意端口是否被占用）

二、补全vuex+scss+element-ui+axios需要的依赖；

1、npm install --save-dev sass-loader node-sass 用于编译scss文件
2、npm install --save vuex axios element-ui

三、编辑文件目录，项目中简单使用scss，vuex，element-ui，axios，slot，props练手
文件目录如下：

//src文件夹页面自己编辑的，其他页面vue-cli生成的；
关于src文件说明：
//assets资源文件jsondata.js放静态数据,样式文件scss和imgs图片文件；

//commponents目录里面放了公共组件header,dialogs,menus,pages等文件；

//routes.js文件放路由配置文件；

//views放详情页面文件；

//vuex放状态管理文件；

//App.vue是项目入口文件。

//main.js这是项目的核心文件。全局的配置都在这个文件里面配置。

从vue-cli手脚架搭建到这个项目搭建，所有改动有src里面文件和webpack.base.config文件：
以下按照截图顺序粘贴出所有改动过的代码：
在webpack.base.config中屏蔽这段代码避免报错，eslint用于代码检测的；
webpack.base.config

{
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },

jsondata.js

const menuDatas={
  home:{
    to: '/',text:'首页'
  },
  about:{
    to: 'about',text:'关于'
  },
  yysxx:{
    to: 'showui',text:'组件库'
  }
};

export {menuDatas}

_header.scss

$headerH: 48px;
.m-header{
  height: $headerH;
}

_menus.scss

.m-menus{
  width: 200px;
  top: 200px;
  position: absolute;
  bottom: 0;
  li{
    line-height:50px;
  }
}
.router-link-exact-active{
  color: #ff0000;
}

reset.scss

//淘宝初始化css代码
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; font-weight:normal; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

_dialogs.vue

header.vue

menus.vue

pages.vue

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/views/Hello'
import aboutPage from '@/views/about'
import showuiPage from '@/views/showui'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/about',
      name: 'about',
      component: aboutPage
    },
    {
      path: '/showui',
      name: 'showui',
      component: showuiPage
    }

  ]
})

about.vue

Hello.vue文件放原本vue-cli的内容，注意原本是在components目录下，现在是剪切到views目录下

略；

showui.vue

store.js

//考虑如何更好地在组件外部管理状态(把组件的共享状态抽取出来,以一个全局单例模式管理呢)
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
//创建Store实例
const store = new Vuex.Store({
    // 创建一个对象来保存应用启动时的初始状态
    state: {
        count: 0,
        adminName:'系统管理员Admin系统管理员',
        dialogBool:false
    },
    mutations: {
        inc: state => state.count++,
        dec: state => state.count--,
        dialogBoolTrue(state){
          state.dialogBool=true;
        },
        dialogBoolFalse(state){
          state.dialogBool=false;
        }
    }
})
export {store}

App.vue

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

import './assets/scss/reset.scss'


import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '',
  components: { App }
})

四、项目跑起来，深刻学习案例；
1、npm run dev 在浏览器打开项目链接查看页面内容，实例学习案例；

2、npm run bulid 打包生成dist文件；

五、部署服务端；
1、直接在iis上部署打包生成的dist文件；

六、遇到的问题；

1、IE浏览器下报错：[vuex] vuex requires a Promise polyfill in this browser.

解决：
第一步： 安装 babel-polyfill 。 babel-polyfill可以模拟ES6使用的环境，可以使用ES6的所有新方法
npm install --save babel-polyfill
第二步： 在webpack.config.js文件中，使用

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

替换：

entry: {
    app:  './src/main.js'
  }

七、代码链接：
https://github.com/MVPVP/ypt201
使用步骤：
下载代码=》安装依赖 npm install =》运行程序 npm run dev =》浏览器中打开 http://localhost:8080