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);