Web前端-Vue--vue-cli腳手架

Vue-cli腳手架搭建:

拿到新電腦第一次配置環境要做的步驟(以前沒有配置過環境):

安裝npm命令:
    
1.去nodejs官網下載node.exe  官網地址:https://nodejs.org/zh-cn/

2. node-v8.9.4-x64.msi  右鍵---安裝  純英文目錄!!!!!!!!!!!!!!!!!!!

3.一路 next 下一步即可     finish完成後 沒有界面!!!

4.win+R 打開cmd  輸入 npm回車  出來一堆英文 沒有表示命令不存在 就表示安裝成功

安裝npm的鏡像命令cnpm:

由於npm命令 下載是走的國外網站  
某些時候會很慢 所以中國團隊推出了一個"淘寶鏡像"  號稱國外網站上線的 
十分鐘之內 淘寶鏡像同步上線  命令是cnpm   npm命令怎麼用 cnpm命令就怎麼用


1.打開cmd  輸入命令:  npm install -g cnpm --registry=https://registry.npm.taobao.org

2.等進度走完沒有出現一堆 error 表示安裝成功

3.輸入cnpm回車 出現一堆非 error的英文表示安裝成功

安裝Vue命令(腳手架命令的安裝):

1.打開cmd 輸入命令  npm/cnpm install vue-cli -g   
    這句話表示全局安裝vue腳手架命令(vue命令)

2.開始走進度  等到進度走完 沒有出現一堆error 表示安裝成功

3.輸入命令 vue -V  注意空格和大寫  如果現實版本號 表示安裝成功

4.vue命令安裝成功!

以後每次新創建一個vue項目時要做的步驟:

1.在本地自己創建一個項目存放的文件夾

2.用cmd切換到這個目錄:
    切換命令:  1.先切換盤符  d:  2.cd 文件夾的路徑 回車

3.輸入命令 vue-init webpack 自己起一個英文的項目名稱(名稱純小寫英文開頭的名字)

4.等待幾吸的時間  開始調查問卷的方式  搭建項目

? Project name (myfirst)  當前項目的名稱 括號爲默認 直接回車表示選擇默認


? Project description (A Vue.js project) 項目描述  直接回車

? Author   項目作者  直接回車

出現一堆英文  直接回車  Vue build standalone

? Install vue-router? (Y/n) 是否安裝 vue-router  輸入Y 回車 必須安裝

? Use ESLint to lint your code? (Y/n) 嚴格模式的格式檢查  不安裝  輸入n回車


? Set up unit tests (Y/n)  是否安裝單元測試  輸入n回車

? Setup e2e tests with Nightwatch? (Y/n) 是否安裝端對端測試  不安裝  輸入n回車


  Yes, use NPM   使用npm自動安裝依賴(第三方庫)
> Yes, use Yarn  使用yarn 自動安裝依賴
  No, I will handle that myself    我自己手動操作 


     這一步驟 可以上下按鍵進行選擇  我們一般選擇第一個 但是npm太慢  所以選擇第三個 回車


To get started:

  cd myfirst
  npm install (or if using yarn: yarn)
  npm run dev

5.按照提示 cd 到指定路徑( cd myfirst)

6.cnpm/npm  install 回車

7.沒有出現一堆error表示依賴下載成功!

8.輸入命令  npm run dev  回車  啓動vue項目

腳手架項目目錄介紹

build文件夾:
    構建項目的文件夾  裏面的文件都是配置當前項目構建的一些信息 
    暫時我們還不用操作

config文件夾:
    做項目配置的文件夾  比如 啓動的地址 不要localhost  端口改成其他
    都可以在這裏面改  以後我們會稍微涉及

node_modules文件夾:
    就是我們cnpm/npm install 下載的所有模塊   

src文件夾: 
    這個就是我們今後寫代碼主要的文件夾

    src文件夾裏面的東西:

        assets
            靜態資源文件夾:
            音頻 視頻 圖片等一些靜態資源
        components:
            存放所有組件.vue文件的文件夾
        router:
            存放路由配置的文件夾

        App.vue文件:
            是默認自帶的 入口歡迎頁的組件

        main.js:
            vue程序的入口文件  vue項目從這裏開始加載

    
static文件夾:
    一個存放靜態文件資源的文件夾 (打包時 並不會一起打包的文件夾)
    比如: html css js文件 都可以存放到這


index.html:
    單頁面應用一個唯一的html 歡迎頁的文件


package.json:
    所有依賴的記錄的配置文件


To get started:

  cd myfirst
  npm install (or if using yarn: yarn)
  npm run dev

5.按照提示 cd 到指定路徑( cd myfirst)

6.cnpm/npm  install 回車

7.沒有出現一堆error表示依賴下載成功!

8.輸入命令  npm run dev  回車  啓動vue項目

組件格式

   1.在src文件夾裏面 找一個地方(一般都是components文件夾) 新建一個後綴名是.vue的文件
        文件名規範:  大駝峯的命名規範


    2.vue文件裏面包含最基本的三個標籤  template標籤 script標籤  style標籤
        template標籤  負責組件的html

          script標籤 組件的js

          style標籤 組件的css樣式

    3.編寫號組件的html+css

    4.在main.js的上面 寫上 import語句 引入該組件
        格式:  import 組件對象名(自己取名 最好是大駝峯)  from "組件vue文件的路徑"
            路徑如果從當前文件夾向下去找  一般 是 ./開頭

    5.以上步驟只是完成了 相當於原來的 Vue.component方法的第二個參數的步驟

    6.註冊組件
      註冊爲全局組件:
          在main.js裏面 調用Vue的靜態方法
          Vue.component("組件標籤名",import進來的那個組件對象)

      註冊爲局部組件:
          在new Vue的大括號裏面 定義components:{
              標籤名:組件對象(import引入的那個對象)


          }

<template>
    <div>
            <h1 @click="show">{{msg}}</h1>
       
            <ul>
                <li  v-for="(item,index) in arr" :key="index">{{item}}</li>
            </ul>
        
    </div>
</template>
<script>
// 這個表示組件數據對外暴露 必須有!!!! 否則外部無法引入組件並且無法使用組件數據
export default {
    // 組件的數據和事件在這裏面定義

    data(){
        return{
            msg:"我是hello組件",
            arr:["快下課了","堅持一下","今晚至少寫20遍"]
        }
    },
    methods:{
        show(){
            alert("點我幹嘛")
        }
    }    
}
</script>
<style >
    h1{

        color:rgb(211, 15, 15);

    }
    ul{
        list-style: none;
        
    }
</style>

<style scoped> </script>  加一個scoped  這個sctyle中的樣式只在當前頁面顯示

子組件的渲染步驟

        1.創建vue文件  編寫組件代碼 html+css+js

        2.這個新創建的vue組件想要成爲誰的子組件 就在哪個組件的vue文件裏面引入
                import語句引入
        3.在當前父組件的export default{

            定義components:{
                子組件標籤:子組件對象
            }
        }

<template>
    <div>
            <h1 @click="show">{{msg}}</h1>
       
            <ul>
                <li  v-for="(item,index) in arr" :key="index">{{item}}</li>
            </ul>

            <Child></Child>
        
    </div>

</template>
<script>
// 引入子組件
import Child from "./Child"


// 這個表示組件數據對外暴露 必須有!!!! 否則外部無法引入組件並且無法使用組件數據
export default {

    // 組件的數據和事件在這裏面定義

    data(){
        return{
            msg:"我是hello組件",
            arr:["快下課了","堅持一下","今晚至少寫20遍"]
        }
    },
    methods:{
        show(){
            alert("點我幹嘛")
        }
    },
    components:{
        // 註冊子組件
        Child,
    }
   
}
</script>
<style >
    h1{

        color:rgb(211, 15, 15);

    }
    ul{
        list-style: none;
        
    } 
</style>

vue-resource在vue-cli中的使用

  1.在當前項目文件夾目錄下 打開cmd或者vscode的終端

  2.輸入命令  cnpm/npm install vue-resource --save
     
--save 表示更新package.json裏面的依賴庫列表

  3.在main.js裏面 引入vue-resource模塊
      import VueResource from "vue-resource"

  4.讓vue全局可以使用vue-resource

// 如果引入模塊 不寫./ 默認去node_modules文件夾裏面找到指定模塊
import VueResource from "vue-resource"

Vue.use(VueResource); //把vue-resource 加載進vue裏面 讓q全局可以使用

 axios在vue-cli腳手架中的使用

  第一種引入方式:
        1. 下載 vue-axios和axios模塊

       2.在main.js裏面 最上面 通過import語句 引入這兩個模塊
          import Axios from "axios"
        import VueAxios from "vue-axios";

        3.Vue.use(VueAxios,Axios) 通過Vue

        這時候 在所有組件裏面 都可以通過this.axios調用到axios模塊

/*import Axios from "axios"
import VueAxios from "vue-axios";

Vue.use(VueAxios,Axios);*/


  第二種引入方式:
      1.下載axios模塊

      2.在main.js裏面 import引入axios模塊

      3.將Axios模塊 綁定給Vue原型

    import Axios from "axios";

    Vue.prototype.$axios=Axios;


  然後再組件裏面 通過 this.$axios({}) 這種方式調用

import Axios from "axios";

Vue.prototype.$axios=Axios;

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章