webpack+vue+SUI Mobile构建webAPP

1、使用vue-cli构建骨架  vue init webpack  your_project_name

2、进入你的项目，加载模块npm install或  cnpm  install(淘宝镜像安装)

3、安装css-loader和style-loader

cnpm install css-loader style-loader --save-dev

4、安装axios  用于发起http请求

5、es6支持

npm install babel-preset-es2015 --save-dev

module: {
    loaders: [
      {
        test: path.join(__dirname, 'es6'),
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      }
    ]
  }

5、在index.html页面引入zepto和sm相应文件，这里还引入了cookie和moment插件

<link href="src/assets/css/sm.css" />
<link href="src/assets/js/plug/sui/sm-extend.min.css" />

<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>

<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script src="/src/assets/js/plug/moment.js"></script>

5、在配置文件webpack.base.conf.js中配置Zepto，Cookies，moment

module.exports = {

externals: {
    'zepto': 'Zepto',
    'Cookies':'Cookies',
    'moment':'moment'
  }

}

这样在想要使用这些时只要import进来就可以使用了  import cookie from Cookies

6、我把配置文件webpack.base.conf.js中module:{}的...(config.dev.useEslint ? [createLintingRule()] : []),注释掉了，（ ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具,使用它可以避免低级错误和统一代码的风格。没注释掉分分钟都有很多报错很烦）

7、npm start就可以开始使用了