這個(gè)下載包是自己基于 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
# 或者使用這節(jié)說到的 nrm 進(jìn)行切換鏡像源 http://www.reibang.com/p/dbdc937997df
# 卸載
npm uninstall vue-cli -g
vue-cli 安裝好之后饿自，然后初始化項(xiàng)目：
vue init webpack "項(xiàng)目名稱"
# 當(dāng)然我自己比較喜歡 webpack-simple 進(jìn)行創(chuàng)建項(xiàng)目
vue init webpack-simple "項(xiàng)目名稱"
注意：webpack 與 webpack-simple 區(qū)別：
本質(zhì)上沒有什么區(qū)別波势，webpack-simple除了沒有eslint的代碼風(fēng)格檢查器 和 單元測(cè)試，其他跟 webpack 一樣，使用 webpack-simple初始化的項(xiàng)目比較簡潔。
執(zhí)行初始化創(chuàng)建項(xiàng)目命令后钢颂，此時(shí)會(huì)彈出命令 :
?Project name （firstVue） 項(xiàng)目名稱。
拜银？Project description(A vue.js project) (此處是添加項(xiàng)目描述)殊鞭。
滓走？Author (***) (作者名稱)篓足。
？Use Eslint to lint your code (Y/N) (是否使用eslint的代碼風(fēng)格檢查器)拐纱。
泵督？should we run "npm install" for you after the project has been created? 選擇yes趾盐，use NPM
安裝完成后，可以在 webpack.config.js 中配置路徑別名：
resolve:{
alias:{
// 修改 vue 被導(dǎo)入時(shí)的路徑 $ 表示以 vue 結(jié)尾
"vue$":"vue/dist/vue.esm.js"
// 給根目錄下的 src 目錄配置別名小腊。方便引入文件
// 注意：在模板組件中的 <style>引入樣式 需要加 ~ 波浪線
// 如：import '~@css/style.css'
"@": resolve("src")
}
}
注意
1救鲤、在 vue-cli 腳手架中，當(dāng)在 webpack.config.js 配置文件中 resolve 中設(shè)置了路徑別名后溢豆，在模板組件中的 <style> 中引入樣式 需要加 ~ 波浪線，如： import '~@css/style.css' 瘸羡。
2漩仙、在 vue-cli 腳手架中，在模板組件中的 <style> 中的樣式可以穿透子組件，不受 scoped 限制队他，如： .swiper >>> .swiper-action { color:red }卷仑，>>>表示樣式穿透，表示 .swiper 里面所有子組件麸折，出現(xiàn) .swiper-action 的都應(yīng)用這個(gè)樣式
<style>
import '~@css/style.css' # 1
# >>>表示樣式穿透锡凝，表示 .swiper 里面所有子組件，出現(xiàn) .swiper-action 的都應(yīng)用這個(gè)樣式
.swiper >>> .swiper-action{
color:red
}
</style>
項(xiàng)目準(zhǔn)備工作
1.index.html
在首頁模板中的 meta 標(biāo)簽改為如下這樣
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,er-scalable=no">
這樣就防止了用戶在設(shè)備上放大縮小垢啼。
2.引入 reset.css窜锯、border.css
下載地址：https://share.weiyun.com/5e9di8c
reset.css進(jìn)行默認(rèn)樣式清除，border.css解決移動(dòng)端邊框 1像素的問題
3.解決移動(dòng)端 click 事件300毫秒延遲
需要引入 fastclick 包芭析，在項(xiàng)目根目錄下锚扎，打開 命令窗口，輸入：
npm install fastclick --save
安裝完成之后馁启，在入口文件 main.js 中輸入：
import fastClick from 'fastclick'
fastClick.attach(document.body)
4.stylus
stylus 跟 less 驾孔、scss 很像，執(zhí)行 如下進(jìn)行安裝
npm install stylus --save
npm install stylus-loader --save
文件后綴是 .styl
5.babel-polyfill
解決部分瀏覽器或手機(jī)不支持 Promise
npm install babel-polyfill --save
在入口文件 main.js 中引入
mport 'babel-polyfill'; // 或者require('babel-polyfill');
