腳手架

我們先在外面創(chuàng)建好空的項(xiàng)目文件夾逼泣，然后用Visual Studio Code軟件打開(kāi)文件玫镐。之后就是如下步驟了。

第一步：安裝 箩溃。如果第一次還沒(méi)有安裝的時(shí)候瞭吃，在使用腳手架之前需要安裝腳手架。下次無(wú)需安裝

image.png

npm install -g @vue/cli

第二步：創(chuàng)建一個(gè)項(xiàng)目涣旨，vue create my-project虱而。在安裝完腳手架之后，就可以創(chuàng)建項(xiàng)目了

image.png

C:\Users\THINK\Desktop\腳手架>vue create my-project
?
?
Vue CLI v3.11.0
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
 Manually select features</pre>

出現(xiàn)上面的結(jié)果后开泽，按回車鍵耐心等待就可以了

第三步：使用命令cd my-project跳轉(zhuǎn)到my-project目錄下

image.png

第四步：使用npm run serve命令啟動(dòng)開(kāi)發(fā)模式

image.png

當(dāng)出現(xiàn)結(jié)果如下圖的時(shí)候牡拇，說(shuō)明就已經(jīng)成功，接下來(lái)就可以寫代碼了

image.png

如何創(chuàng)建一個(gè)vue的項(xiàng)目

目錄結(jié)構(gòu)

image

程序的啟動(dòng)

• 找到 main.js 入口

• 加載 Vue

• 加載 App 組件

• 創(chuàng)建 Vue 實(shí)例

• 將 App 組件替換到入口節(jié)點(diǎn)

創(chuàng)建 Vue 實(shí)例

<template>
 <div id="app">
 ---------------------------
 這里面寫的是我們的元素標(biāo)簽
 //--------------使用組件
 <filmsLi></filmsLi>

 </div>
</template>
<script>
//---------------導(dǎo)入組件vue ,from前面的參數(shù)是組件名稱 ，from后面的參數(shù)是URL地址
import filmsLi from './components/filmsLi.vue' 
//我們?cè)趀xport default對(duì)象里面寫我們的vue程序
export default {
 name:'app',
 data(){
 return {

 }
 },
 methods:{ 
 },
 //---------------注冊(cè)組件
 components:{
 filmsLi //全等于 filmsLi：filmsLi
 }
}
</script>
<style scoped>
-------------
里面寫的是我們的樣式
</style></pre>

分析：

三大部分：

第一部分：template

• 作用：組件的模板

• 注意：只能有一個(gè)根節(jié)點(diǎn)（template 本身不算）

    <template> <div id="app"> --------------------------- 這里面寫的是我們的元素標(biāo)簽 //--------------使用組件 <filmsLi></filmsLi> </div> </template>

第二部分：script

作用：組件的 JavaScript 辅髓，用來(lái)配置組件的選項(xiàng)（data泣崩、methods少梁、watch。矫付。凯沪。）

<script>
//---------------導(dǎo)入組件vue ,from前面的參數(shù)是組件名稱 ，from后面的參數(shù)是URL地址
import filmsLi from './components/filmsLi.vue' 
//我們?cè)趀xport default對(duì)象里面寫我們的vue程序
export default {
 name:'app',
 data(){
 return {

 }
 },
 methods:{ 
 },
 //---------------注冊(cè)組件
 components:{
 filmsLi //全等于 filmsLi：filmsLi
 }
}
</script></pre>

第三部分：style

當(dāng) <style> 標(biāo)簽有 scoped 屬性時(shí)买优，它的 CSS 只作用于當(dāng)前組件中的元素妨马。

<style scoped>
-------------
里面寫的是我們的樣式
</style>

如果要使用less預(yù)編譯的話，需要安裝兩個(gè)組件

npm i less –D

npm i less-loader -D

安裝完成后杀赢，就可以使用less了

<style scoped lang="less">
-------------
里面寫的是我們的樣式
</style></pre>

單文件組件的定義和使用

創(chuàng)建單文件組件

• 推薦把通用組件創(chuàng)建到 components 目錄中

• 把視圖組件定義到 views 目錄中

• 單文件組件只是承載組件的容器而已烘跺，既不是全局也不是局部，如果要使用這個(gè)單文件組件脂崔，必須 注冊(cè)

  • 全局注冊(cè)使用滤淳，可以在任何組件中使用

    • 局部注冊(cè)使用，只能在注冊(cè)的組件中被使用

建立一個(gè)單文件的組件

<template>
 <div>
 foo 組件
 </div>
</template>
?
<script>
 export default {
 data() {},
 methods: {}
 // ...
 }
</script>
?
<style></style></pre>

全局注冊(cè)使用

在 main.js 文件中

import Vue from 'vue'
import Com1 from './components/Com1.vue'
?

?
Vue.component('Com1', Com1)

// 接下來(lái)就可以在任何組件中使用 Com1 組件了</pre>

公共樣式砌左，我們一般創(chuàng)建在assets文件夾中脖咐，然后在 main.js 文件中導(dǎo)入，但不要寫名稱和from

import Vue from 'vue'
import App from './App.vue'
import './assets/css/resetCss.css' //導(dǎo)入css樣式
Vue.config.productionTip = false
new Vue({
 render: h => h(App),
}).$mount('#app')

局部注冊(cè)使用

<template>
 <div>
 <!-- 使用 Com2 組件 -->
 <Com2></Com2>
 </div>
</template>
<script>
 import Com2 from './components/Com2'
?
 export default {
 components: {
 Com2
 }
 }
</script></pre>

ECMAScript 6 Module

兩種導(dǎo)出導(dǎo)入的方式

第一種方式：

導(dǎo)出：export default {}
導(dǎo)入： import {sun} from './assets/sum.js' //花括號(hào)里的名字為導(dǎo)出時(shí)函數(shù)的名字 </pre>

實(shí)例：

myAxios函數(shù)的導(dǎo)出：
import axios from 'axios'
export function myAxios(pageNum) {
 return axios({ //返回的結(jié)果是promises對(duì)象
 method: 'get',
 url: 'http://132.232.94.151:3000/api/film/getList',
 // data: {
 //     pageName
 // }
 params: {
 pageNum
 }
 })
}
?
導(dǎo)入：
import {myAxios} from './assets/axios' //花括號(hào)里面的內(nèi)容要和函數(shù)名一直</pre>

第二種方式：

導(dǎo)出：export default {}
導(dǎo)入：import filmsLi from './components/filmsLi.vue' //自定義的名稱