vue2.0基礎 —— 項目搭建

寫在前面的話：

　　本文中的項目名稱用下劃線標出來了，都是本身能夠更名的。

---

 1、項目搭建：

　　1.安裝前：你須要知道怎麼使用命令行（在開始欄輸入：cmd ,看到搜索結果後點擊一下，出現的黑窗口就是啦），而後你還須要先安裝 node（步驟詳解之後更新）

　　2.安裝 vue-cli步驟以下（若是已經全局安裝了的，這步就能夠不要了）

npm install -g vue-cli        // 全局安裝
vue                           // 查看,這裏會出現一些用法，指令之類的訊息
vue list                      // 會出現browserify , webpack 模板相關的訊息

　　3.初始化模板，此處咱們選擇 webpack做爲打包工具：

　　通常來講，語法是這樣的： vue init 模板名 項目名稱

實例：

vue init webpack sell              //默認爲2.0了
vue init webpack#1.0 sell1.0 //則爲1.0版本 // 期間會有一些選項的設置，可參考如下安裝截圖 // 完成以後 會生成一個以項目名稱的文件夾，如 sell

下面是個人安裝截圖以下：

安裝完成後其實都是有提示的~~~

下面就是 sell 文件夾的內容(請忽略裏面的data.json文件，由於那是我本身手動建立的，是用來模擬後臺數據那一塊內容~)：

　　4.安裝並運行模板

cd sell
npm install    // install 過程會比較慢，由於要下載一些依賴包(固然你也能夠選擇 cnpm 安裝)，完成後 目錄下 會多了一個 node_modules 文件夾

npm run dev         
// 若爲2.0版本運行時，瀏覽器會自動打開,1.0版本須要在地址欄手動輸入：localhost:8080

　　成功的話，在瀏覽器輸入localhost:8080並回車，頁面會出現以下：

　　

接下來進行項目開發：

1.安裝須要的依賴

　　1）我用的scss，因此要安裝一下語言依賴：

cnpm install node-sass --save-dev  (npm裝的時候報錯，因此用淘寶鏡像進行安裝就行了)
npm install sass-loader --save-dev

　　2）若是要用到axios請求數據，就要安裝axios，或者用jsonp請求數據，就安裝jsonp，根據本身須要的進行安裝就能夠了。

2.明確文件的存放，文件夾的結構（主要是 src文件夾以及static文件夾）

　　

src文件夾：最初一直在糾結公用樣式的引入問題，如今有了一個明確的方案：

　　1）在App.vue 引入：

<style lang="scss">
@import 'assets/common/base-h5.scss';　　// 初始化樣式文件
@import 'assets/common/font.scss';　　　 // iconfont 字體文件
@import 'assets/style.scss';　　　　　　　// 公用樣式文件
</style>

　　2）樣式編寫(style.scss，組件裏邊的樣式編寫或樣式文件編寫等)均可引入 mixin-h5.scss;  裏面有一些主題色的定義，scss語法的定義方法之類的。

這樣就能在style.scss文件愉快地編寫含有背景圖片的公用樣式啦。

另外，這樣寫也是最大避免了base-h5,font文件的重複引用。

　　3）components 文件夾裏邊固然就是你的組件了，組件show 裏面的 xx.vue 格式 示例：

<template>
  <div>哈哈</div>
</template>
<script>
export default {
  name: 'show'
}
</script>

<style lang="scss">
  div{
    color: red;
  }
</style>

static文件夾：

　　1) 存放第三方的依賴（例如 flexible.js,mobile-util.js）

　　2) img

 

以上了~