【Vue】Vue脚手架(vue-cli)环境搭建和应用示例

Vue脚手架

vue脚手架指的是vue-cli它是vue官方提供的一个快速构建单页面（SPA）环境配置的工具，cli 就是(command-line-interface ) 命令行界面。

创建vue项目的步骤

1. (仅第一次创建Vue项目时执行)：全局安装@vue/cli npm install -g @vue/cli
2. 切换到要创建项目的目录，打开cdm窗口 使用命令 vue create XXX 创建项目。
3. 启动项目： npm sun serve

项目结构解析

├── node_modules：npm加载的项目依赖模块
|
├── public
│   ├── favicon.ico
│   └── index.html：主页面
|
├── src
│   ├── assets：存放静态资源
│   │   └── logo.png
│   │── component：组件目录，我们写的组件就放在这个目录里面
│   │   └── HelloWorld.vue
│   │── App.vue：根组件
│   │── main.js：入口js文件
|
├── .gitignore: git版本管制忽略的配置
|
├── babel.config.js：babel的配置文件
|
├── package.json：应用包配置文件 
|
├── README.md：应用描述文件
|
├── package-lock.json：包版本控制文件

Vue脚手架应用示例

基本分析

创建了一个名为hello-world的项目，项目结构如下：

基本运行过程：
index.html --> main.js -->App.vue
将根组件App挂载到index.html页面的div组件上来

每个组件拥有的三个结构： 模板、行为、样式

注：template模板中有且只有一个根标签

要想要两个组件之间实现关联，必须要import … ,之后还需要components中注册一下，就可以调用了

创建自己的第一个vue-cli项目界面

实现如图所示：

• APP.vue：

<template>
  <div id="app">
    <h1>{{title}}</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
   return {
     title: '这是南栀的第一个Vue脚手架项目！'
   }
  },
}
</script>

<style>

</style>

实现组件嵌套

• 创建一个Users.vue的组件：
  
• 将Users这个子组件嵌套到父组件（App.vue）中

方法一：全局注册组件： 当有人调用users这个标签的时候，就会执行Users.vue这个组件

main.js中：

import { createApp } from 'vue'
import App from './App.vue'
import Users from '../src/components/Users';

const app = createApp(App);

app.mount('#app');

app.component('users',Users)

在App.vue组件中应用我们注册的全局标签users就可以了

方法二：局部注册组件： 只能在App.vue中使用。注意：取的标签名不要跟系统的重复

Vue组件CSS域

当我们给App.vue组件添加样式h1的颜色为红色的时候，会发现组件中所有嵌套的组件h1标签的全部应用样式了，所以我们要将样式设置为局部样式 scoped定义局部样式。

多个组件嵌套

实现界面展示：

• Header组件：

<template>
  <header class="app-header">
    <h1>{{title}}</h1>
  </header>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      title: 'Vue.js Demo'
    }
  }
}
</script>

<style scoped>
  header{
    background-color: lightgreen;
    padding:10px;
  }
  h1{
    color:#222222;
    text-align: center;
  }
</style>

• Footer组件部分：

<template>
  <footer class="app-footer">
    <p>{{foo}}</p>
  </footer>
</template>

<script>
export default {
  name: "Footer",
  data() {
    return {
      foo: '南栀-'
    }
  }
}
</script>

<style scoped>
  footer{
    background-color:lightgreen;
    padding:10px;
  }
  p{
    color:gray;
    text-align:center;
  }
</style>

• Users组件部分：

<template>
  <div class="users">
    <h1>hello users vue</h1>
    <ul>
      <li v-for="user in users" :key="user">
        {{user}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Users",
  data() {
    return {
      users: ['南栀','二黑','lv']
    }
  }
}
</script>

<style scoped>
  h1{
    color:green;
  }
</style>

• App.vue组件部分

<template>
  <div id="app">
    <Header/>
    <Users/>
    <Footer/>
  </div>
</template>

<script>
import Users from '@/components/Users'
import Header from '@/components/Header'
import Footer from '@/components/Footer'

export default {
  name: 'App',
  data() {
   return {
     title: '这是南栀的第一个Vue脚手架项目！'
   }
  },
  components: {
    Header,
    Users,
    Footer,
  }
}
</script>

<style>

</style>