【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脚手架项目！'
   }
  },
}
<