Vue CLI 搭建项目

Vue CLI 搭建项目

1 介绍

1) 什么是Vue-CLI

Vue CLI ( Command-Line Interface, 翻译为命令行界面 ) 是一个基于 Vue.js 进行快速开发的完整系统, 俗称Vue项目脚手架

CLI是一个全局安装的npm包, 提供了终端里的vue命令, 可以快速搭建一个新项目

2) 作用

Vue CLI是Vue.js的脚手架，用于自动生成vue.js+webpack的项目模板

2 安装与升级

1) 安装

可以使用下面任一命令安装Vue CLI

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确：

vue --version

2) 升级

如需升级全局的 Vue CLI 包，请运行：

npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli

3 创建项目

1) 使用脚手架创建项目

在根目录下, 运行vue create + 项目名称命令来创建一个新项目

vue create hello-world
# hello-world即为项目名称, 后面会生成该文件夹

选择一个默认预设值

这里选择Mannully select features, 手动配置

选择需要设置的配置项, 这里按照不同的项目需求进行设置 (或根据公司要求配置)

:::info Babel: 将ES6语法—>ES5
CSS Pre-processors: CSS预处理器(stylus)
Linter / Fprmatter: 代码校验/格式化 :::
选择vue版本

选择Stylus作为CSS预处理器

In dedicated config files 把配置单独存放到不同的配置文件

是否将配置作为一个预设一般: 否

到这里就创建成功了

2) 执行项目

执行cd hello-world命令, 进入到创建的hello-world文件中

或者直接用VScode打开创建的hello-world文件夹

 cd hello-world

再执行npm run serve命令, 项目就启动起来了

然后打开对应的访问地址http://localhost:8082/就可以看到创建的项目了

4 目录结构

1) 目录结构及主要文件

项目目录主要包括:

① node_modules文件夹

② public文件夹

favicon.ico 图标
index.html 整个项目的入口文件

③ src文件夹

assets文件夹
components文件夹 放置组件
- HelloWorld.vue 默认创建的组件
App.vue Vue实例的单文件组件
main.js 挂载到#app上的Vue实例

④ 其他相关配置文件

package.json
……

2) 启动流程

整个项目启动流程见下图:
未命名文件 (2).jpg

3) 框架清理

使用Vue CLI脚手架搭建的项目, 在使用时会产生一些项目用不到的示例,

在项目搭建过程前需要清除这些不需要的示例

主要是模板自己创建的HelloWorld.vue组件

:::tips

删除components文件夹下HelloWorld.vue组件
在App.vue中删除HelloWorld.vue组件的导入、挂载、引用和img标签
清除App.vue中的style样式 :::

5 基本示例

1) 创建组件

在components文件夹下新建Demo.vue组件

定义Demo.vue组件, 包括组件模板、组件逻辑和组件样式三部分

<template>
    <div>我是demo组件内容</div>
</template>
<script>
export default {
    name:'Demo',
}
</script>
<style lang="stylus">
</style>

2) 导入组件对象

在App.vue中组件逻辑部分导入Demo.vue组件

import Demo from './components/Demo.vue'

3) 挂载组件

在App.vue中组件逻辑中设置components选项, 并添加组件名为Demo的组件

export default {
  name: 'App',
  components: {
    Demo: Demo, //可缩写为Demo,
  },

4) 引用组件

在App.vue中组件模板中, 引用Demo组件, 这里要注意单个根元素问题, 需外面包裹一个元素

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

6 父子组件通信

1) 父组件向子组件传值

① 在子组件模板中添加属性,发送数据

如添加msg自定义属性

<template>
   <div id="app">
      <Demo msg="hello" msg2="a"></Demo>
  </div>
</template>

② 在子组件中通过props,接收数据

示例

<script>
export default {
    name:'Demo',
    props:['msg'],
}
</script>

同样, 也可以给子组件传递父组件data中定义的数据

<script>
import Demo from './components/Demo.vue';
export default {
  name: 'App',
  components: {
    Demo: Demo, //可缩写为Demo,
  },
  data(){
    return {
      a:'父组件的数据'
    }
  }
};
</script>

<template>
    <div id="app">
      <Demo msg="hello" :msg2="a"></Demo>
  </div>
</template>

<script>
export default {
    name:'Demo',
    props:['msg','msg1'],
}
</script>

这里就将父组件data中的数据传递给子组件了

2) 子组件向父组件传值

① 在子组件模板中绑定一个方法

<template>
  <div @click="handleClick">我是demo组件内容</div>
</template>

② 在方法中向父组件提交 (emit) 一个事件

<script>
export default {
  name: 'Demo',
  methods: {
    handleClick() {
        // 第一个参数为事件名, 第二个参数为传输的数据
      this.$emit('s2f',this.obj);
    },
  },
  data() {
    return {
      obj: { id: 1, name: 'xiaoming' },
    };
  },
};
</script>

③ 在子组件标签中监听事件 (绑定方法)

<template>
    <div id="app">
      <Demo @s2f="handleSend"></Demo>
  </div>
</template>

④ 在父组件中编写处理程序

<script>
import Demo from './components/Demo.vue';
export default {
  name: 'App',
  components: {
    Demo: Demo, //可缩写为Demo,
  },
  methods:{
    //参数value即为传输过来的数据
    handleSend(value){
      console.log(value);
    }
  },
};
</script>

3) 交互

需求

实现将Demo.vue组件中的input输入框输入的内容添加到App.vue父组件中

设置Demo.vue子组件

<template>
  <div>
    <button @click="handleClick">点击添加</button>
    <input type="text" v-model="msg"/>
  </div>
</template>

<script>
export default {
  name: 'Demo',
  methods: {
    handleClick() {
      // 第一个参数为事件名, 第二个参数为传输的数据
      this.$emit('s2f', this.msg);
    },
  },
  data() {
    return {
      msg: '',
    };
  },
};
</script>

设置App.vue父组件

<template>
  <div id="app">
    <Demo @s2f="handleSend"></Demo>
  </div>
</template>

<script>
import Demo from './components/Demo.vue';
export default {
  name: 'App',
  components: {
    Demo: Demo, //可缩写为Demo,
  },
  methods: {
    //参数value即为传输过来的数据
    handleSend(value) {
      this.msg = value;
      console.log(value);
    },
  },
  data() {
    return {
      msg: '',
    };
  },
};
</script>

效果实现

Web前端

Vue CLI (前端工程化)