vue-cli項目創建流程和使用
阿新 • • 發佈：2019-02-25
執行 sco imp tel axios turn 結構 mage 函數
安裝node.js
安裝vue-cli
npm/cnpm install -g vue-cli
vue -V 查看版本
vue -list
sass 選N
cd myproject
npm install
npm run dev
d:
npm run dev 讓項目執行起來
#下載vuex 解決父子傳值得問題 npm install vuex --save #下載axios 向後端請求數據 npm install axios --save
當我們生成項目的時候在我們的src文件,（只關心src裏邊的文件）
可以創建一個components文件夾,來放置vue的文件,
可以進行創建更多的文件夾進行分類.
每次創建一個組件都需要三部分 頁面結構，也免得業務邏輯，樣式
<template>
</template>
<script>
export default{
name:‘VnoteList‘,
data(){
return{
}
}
}
</script>
<style scoped></style> # scoped對當前組建的樣式起作用
data必須是一個函數,且必須return一個對象,
當我們需要引入組件的時候需要有兩個步驟:
1.引入當前文件
2.掛載
在App.vue組建中導入組件使用
<script>
import VnoteShow from ‘./VnoteShow‘
import Vmark from ‘./Vmark‘
export default{
name:‘Vnote‘,
data(){
return {
}
},
components:{
VnoteShow,
Vmark,
}
}
</script>
那麽在template顯示就可以:
<template> <VnoteShow></VnoteShow> 顯示組件的內容 </template>
main.js中，
import Vue from ‘vue‘
import vueRouter from ‘vue-router‘
import Vmain from ‘@/components/Vmain‘
import Vnote from ‘@/components/Vnote‘
Vue.use(Router)
const router = new vueRouter({
routes: [
{
path: ‘/‘,
name: ‘Vmain‘,
component: Vmain
},
{
path: ‘/note‘,
name: ‘Vnote‘,
component: Vnote
},
]
})
vue-cli項目創建流程和使用