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;