這個(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.itdecent.cn/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)格檢查器 和 單元測試，其他跟 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');