这个下载包是自己基于 webpack 搞的，可以看看https://github.com/chichengyu/webpack
vue-cli安装
输入
npm install vue-cli -g
# 如果速度慢，可以先安装 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 然后再安装 vue-cli
cnpm install vue-cli -g
# 或者使用这节说到的 nrm 进行切换镜像源 https://www.jianshu.com/p/dbdc937997df
# 卸载
npm uninstall vue-cli -g
vue-cli 安装好之后，然后初始化项目：
vue init webpack "项目名称"
# 当然我自己比较喜欢 webpack-simple 进行创建项目
vue init webpack-simple "项目名称"
注意：webpack 与 webpack-simple 区别：
本质上没有什么区别，webpack-simple除了没有eslint的代码风格检查器 和 单元测试，其他跟 webpack 一样，使用 webpack-simple初始化的项目比较简洁。
执行初始化创建项目命令后，此时会弹出命令 :
?Project name （firstVue） 项目名称。
？Project description(A vue.js project) (此处是添加项目描述)。
？Author (***) (作者名称)。
？Use Eslint to lint your code (Y/N) (是否使用eslint的代码风格检查器)。
？should we run "npm install" for you after the project has been created? 选择yes，use NPM
安装完成后，可以在 webpack.config.js 中配置路径别名：
resolve:{
alias:{
// 修改 vue 被导入时的路径 $ 表示以 vue 结尾
"vue$":"vue/dist/vue.esm.js"
// 给根目录下的 src 目录配置别名。方便引入文件
// 注意：在模板组件中的 <style>引入样式 需要加 ~ 波浪线
// 如：import '~@css/style.css'
"@": resolve("src")
}
}
注意
1、在 vue-cli 脚手架中，当在 webpack.config.js 配置文件中 resolve 中设置了路径别名后，在模板组件中的 <style> 中引入样式 需要加 ~ 波浪线，如： import '~@css/style.css' 。
2、在 vue-cli 脚手架中，在模板组件中的 <style> 中的样式可以穿透子组件，不受 scoped 限制，如： .swiper >>> .swiper-action { color:red }，>>>表示样式穿透，表示 .swiper 里面所有子组件，出现 .swiper-action 的都应用这个样式
<style>
import '~@css/style.css' # 1
# >>>表示样式穿透，表示 .swiper 里面所有子组件，出现 .swiper-action 的都应用这个样式
.swiper >>> .swiper-action{
color:red
}
</style>
项目准备工作
1.index.html
在首页模板中的 meta 标签改为如下这样
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,er-scalable=no">
这样就防止了用户在设备上放大缩小。
2.引入 reset.css、border.css
下载地址：https://share.weiyun.com/5e9di8c
reset.css进行默认样式清除，border.css解决移动端边框 1像素的问题
3.解决移动端 click 事件300毫秒延迟
需要引入 fastclick 包，在项目根目录下，打开 命令窗口，输入：
npm install fastclick --save
安装完成之后，在入口文件 main.js 中输入：
import fastClick from 'fastclick'
fastClick.attach(document.body)
4.stylus
stylus 跟 less 、scss 很像，执行 如下进行安装
npm install stylus --save
npm install stylus-loader --save
文件后缀是 .styl
5.babel-polyfill
解决部分浏览器或手机不支持 Promise
npm install babel-polyfill --save
在入口文件 main.js 中引入
mport 'babel-polyfill'; // 或者require('babel-polyfill');
网友评论