webpack+vue+SUI Mobile构建webAPP
1、使用vue-cli构建骨架 vue init webpack your_project_name2、进入你的项目,加载模块npm install或 cnpm install(淘宝镜像安装)3、安装css-loader和style-loadercnpm install css-loader style-loader--save-dev4、安装axios 用
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就可以开始使用了
更多推荐
所有评论(0)