vue2.0基礎 —— 項目搭建


寫在前面的話:

  本文中的項目名稱用下划線標出來了,都是自己可以改名的。


 一、項目搭建:

  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

 

以上了~

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM