本文将带你了解WEBAPP开发教程webpack+vue+SUI Mobile构建webAPP，希望本文对大家学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就可以开始使用了    

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！