VueDay05:vuecli 腳手架

百度搜索node.js 下載安裝

node -v 查看node版本

npm -v 查看npm的版本，因爲npm是node寫的，並且是一個node包的管理工具，所以需要先裝node

cnpm install -g @vue/cli

進入項目目錄：

創建項目：

vue create 項目名稱

選擇 manually select features

按空格取消選擇 Linter

只裝babel，選擇package json

cd 項目名稱

npm run server

import 別類名 from 路徑

main.js 解釋：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Vue.config.productionTip=false 關閉生產環境

new Vue().$mount('#app')

等價於

new Vue('el':'#app')

render:h=>h(App)

等價於

render:function(createEl){

return createEl(App)

}

傳入的形參名可以隨便定義

App.vue文件解釋：

*.vue 文件，是一個自定義的文件類型，用類似HTML的語法描述一個Vue組件

由三部分組成：template 標籤，script標籤 ，style標籤

<template>
  <div id="app">
    123
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<!--該組件的樣式-->
<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<!--全局樣式-->
<style>
  .emphasis{
    margin-left:5px;
    color:#333;
    font-weight:700;
  }
</style>

template中只能有一個根標籤

script標籤中 必須將組件對象導出 export default{}

style標籤加上 scoped='scoped'屬性 將標籤的作用範圍 限制在 該組件內,也就是定義的樣式的生效範圍只是本組件

全局註冊：

在main.js中全局註冊

import xxx from xxx

Vue.component()

import Vue from 'vue'
import App from './App.vue'
import NavBar from './components/NavBar';


Vue.config.productionTip = false;
Vue.component('NavBar',NavBar);

new Vue({
  render: h => h(App),
}).$mount('#app')

局部註冊：

<template>
  <nav-bar></nav-bar>
</template>

<script>
import NavBar from './components/NavBar'

export default {
  components:{
    'nav-bar':NavBar
  }
}
</script>

<style>
#nav-bar {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

0x02 靜態資源的引入

assets文件夾 存放靜態資源

引入方法：

相對路徑：<img src='../assets/img/11.jpg'/>

絕對路徑: <img src='@/assets/img/11.jpg'/>

@會被解析爲該項目的src文件夾的絕對路徑

方式二：

<template>
<div>
    <ul>
        <li>php</li>
        <li>javascript</li>
        <li>HTML</li>
        <li>CSS</li>
    </ul>
    <!-- <img src="../assets/1.jpg" alt=""> -->
    <img :src="img_url" alt="">
</div>
</template>

<script>
    export default{
        data:function(){
            return{
                img_url:require('../assets/1.jpg')
            }
        }
    }
</script>

<style>
</style>

也可以將靜態資源放在public文件夾下

引入：

   <img src="/頭像.jpg" alt="">
   <img src="../../public/頭像.jpg" alt="">

0x03 css文件的引入：

asserts下存放css文件

相對路徑：

App.vue的style標籤中：@import url("./assets/index.css");

也可以在public/index.html中引入：    <link rel="stylesheet" href="../src/assets/index.css">

0x04 assert 和public 如何去選擇

一般用戶上傳的頭像、網站logo等這些靜態資源，可以放在public下

其餘一般放在assert下

assert中的css，js會被編譯

0x05 axios

cnpm install axios

main.js

import Axios from 'axios';
Vue.prototype.axios =Axios;

<script>
    export default{
            created:function(){
                this.axios.get('http://101.200.142.148/axios.php').then(
                    res=>{
                        console.log(res);
                    }
                )
            },
            data:function(){
                return {
                    nav_list:[]
                }
            }
    }
</script>

cnpm install --save vue-axios

import VueAxios from 'vue-axios';

Vue.use(VueAxios,Axios);