②Vue 使用vue-cli创建模板项目、组件化编码流程简述

阅读量：3967 次

发布时间：2019-05-24

本文共 9117 字，大约阅读时间需要 30 分钟。

Vue

本人是个新手，写下博客用于自我复习、自我总结。

如有错误之处，请各位大佬指出。
学习资料来源于：尚硅谷

使用vue-cli创建模板项目

vue-cli 是 vue 官方提供的脚手架工具。

（先找好Vue项目的根目录）

（以下命令需要先安装node.js才可以，如果有需要，可以移步我之前node.js的文章，里面有node的基本用法）

①全局安装：

②建项目：

这个脚手架其实提供了六种项目可供选择，感兴趣的可以去

github: 找找看。

平常选择最多的就是webpack，除此以外还有browserify等等

在这里插入图片描述

然后会出现下面的一系列初始化：

其中Project name 一定要小写（当然你可以自己命名），暂时不用vue-router，Set up unit tests单元测试的包也不需要，其他的默认就行。

因为需要安装包，所以在最后的时候，可以选择如何下载，一个使用NPM下载，一个使用Yarn下载，No就是我们自己来安装，这里选择第三个。

选择好后，它也会告诉我们接下来如何去做：

所以之后就这么操作即可。

③ cd vue_demo

④ npm install （下的很慢…）

⑤ npm run dev 这一步为什么要这么做其实在vue_demo的package.json里写到：

在运行第五步后会提示你，进入8080。然后访问：http://localhost:8080/ 即可。

只要能出现一个初始的Vue页面就成功了。之后就可以去编写代码了。

模板项目的结构

在我们建好项目后，在项目中可以看到一些配置文件：

这其中就可以看到webpack的开发环境配置和生产环境配置。（如果感兴趣，可以移步我之前webpack的文章。当然目前我们不需要了解这些配置）

还需要说的是index.js，它里面可以设置端口号。如果有多个vue项目需要运行，还需要来手动更改端口号。autoOpenBrowser可以设置是否自动打开浏览器，如果设置为true，当我们npm run dev的时候就会自动打开页面，不需要我们手动输入了。

node_modules就是依赖，src就是源码的目录，把代码写在里面。

static放置一些全局的资源，比如：样式或者图片

我们可以发现最开始static文件夹下，有个文件叫做gitkeep，而且它里面什么都没有。它的作用是为git服务的，因为git有一个特点：如果这个文件夹里面什么都没有，它会自动把这个文件夹忽略。但是我们不希望static文件夹被忽略，否则我们还得手动创建一个static文件夹，为了方便，只要在文件夹下放一个文件名叫作gitkeep的空文件就可以了。

.babelrc：用来将ES6转为ES5，JSX转为JS。

.eslintrc：eslint的配置。

.eslintignore：eslint会对一些文件进行检查，通过在其中设置可以帮我们忽略一些文件

eslintignore默认帮我们忽略build文件夹，config文件夹，将来要生成的dist文件夹和根目录下的js文件。（需要的话我们按格式手动添加就好）

在这里插入图片描述

gitignore默认会帮我们忽略：依赖文件夹，将来要生成的dist文件夹，安装失败的debug日志文件，还有各种软件生成的文件夹。这些文件 / 文件夹显然不希望被解析

项目的一些描述文件：

总结：

需要注意的是，入口js文件一定不能改名，因为在webpack的配置中设置了入口文件名，咱们也没必要去修改。

基于脚手架编写项目

在初始化建好的项目里：

在index.html中可以看到：

那么我们想去创建Vue实例，在main.js中就要new Vue：

这其中有一个components。在导入组件App.vue时，import App … ，这个App不像以前一样确定了这个组件的标签名，我们还需要配置。所以它的作用是：将这个组件映射成特定名称的标签。所以它完整格式是这样的：components:{App: App}，我们简写就好了。当我们导入好了之后就可以将这个模板匹配到页面中的id为app的div，我们渲染的根组件就是App.vue。

组件：局部功能界面，里面包含实现这个界面所有的相关资源html+css+js / img

正是因为它需要这些相关资源，所以在组件App.vue中：

我们可以看到三组标签：<template> <script> <style>。

现在说完了一个基本的格式，我们现在就来自己编写：

项目结构：

根组件一般放在src根目录下，暂且就叫App.js。

对于组件有一个默认格式：

模板必须要有个根标签（不一定是div），然后script向外默认暴露一个配置对象。

HelloWorld.vue：

我们想使用，需要设置App.vue

然后设置入口文件，main.js：

//入口js：创建Vue实例import Vue from 'vue'//1、引入import App from './App'new Vue({
     el: '#app',  //2、映射  components: {
       App  },  //3、使用  template: '
   '})

现在我们对生命周期的另一条路径终于有了解答（之前没有去说明），当系统去判断有没有template模板，现在我们设置了模板，它就会把模板中的内容挂入到html中去显示。

在这里插入图片描述

index.html

      
       
       vue_demo

现在就写完了，npm run dev即可。

项目的打包与发布

①打包：npm run build

打包后就会出现之前提到过但是没详细说明的dist文件夹。

②发布1：使用静态服务器工具包

安装：npm i -g serve

serve dist （相当于运行文件夹）

访问 http://localhost:5000 （不确定每个人是不是都是5000，运行serve dist后会提示访问的链接）

②发布2：使用动态 web 服务器(tomcat)

（需要tomcat服务器，如果没有，可以不用尝试）

修改配置:
webpack.prod.conf.js

output: {    .... //相关内容	publicPath: '/xxx/' //打包文件夹的名称}

重新打包:
npm run build

修改 dist 文件夹为项目名称: xxx

将 xxx 拷贝到运行的 tomcat 的 webapps 目录下

访问: http://localhost:8080/xxx

eslint编码规范检查

ESLint 是一个代码规范检查工具

它定义了很多特定的规则, 一旦你的代码违背了某一规则, eslint会作出非常有用的提示。根据提示，它会给我们一个规则相关的网页，我们只要去网页上看，就会知道错误原因了（只不过网页是全英的）。

官网: http://eslint.org/

基本已替代以前的 JSLint

但是也许你会碰到一些规则，让你感到难受，我们就可以暂时关闭掉相关规则。

打开之前提到的eslintrc.js文件，里面会有个rules，我们可以在里面关闭一些规则。

0：关闭规则。（off也行）

1：打开规则，并且作为一个警告（信息打印黄色字体）

2：打开规则，并且作为一个错误（信息打印红色字体）

当然，修改了配置，需要重新npm run dev才能实现。

但是毕竟大家都在用eslint，虽然有些规则有点难受，最后还是应该根据提示一点点修改（当然需要看公司的态度了，有的可能不看重，有的可能必须要一致）。而且遇到一点问题就修改配置文件，再重启，也挺麻烦的。可以在eslintignore中，直接把文件忽略，这样一来就忽略了所有js文件和vue文件，再在完成项目后把这段代码去掉，用eslint检查，最后一起修改代码也挺好。

*.js*.vue

最后运行只要是以下情况，就没问题了。

组件化编码的流程

组件化编码的流程：

拆分组件

静态组件（数值固定）

动态组件（初始化显示、交互）

简单举例（无完整代码，各位可以自己写一个简单的尝试尝试）

前提是我们写好一个html+css的页面。

首先是拆分组件：

对于最外围（根组件），依然叫App.vue（图中写错了，应该只有首字母大写）

然后分为左右两个组件，左侧组件时提交评论，这里叫它Add.vue。右侧组件是评论回复，这里叫它List.vue，里面的每一项就叫它Item.vue。

拆分之后对src里设计项目结构：

想好怎么去拆以后，接下来就是静态组件的处理：根据html代码，只要把各自部分的代码移动到组件vue里的template下即可。

据我所知，很多软件都有缩放的一个功能，如下图。（我使用的是idea）

它可以把每个部分缩起来。这样一来我们移动html代码就方便了，也好拆很多了。

因为在设计html时肯定也是按结构去设计的。最外层div不用，里层div就可以放在App.vue中了。然后通过组件去把html拆分，把Add部分和List部分拆出来，分别放在两个vue中即可。

App.vue：

同样的，接下来还可以拆分css，把每个组件部分的css部分拆出来，放在组件的style中即可。同时还可以把相关的css放在static下：

如果放在static下需要注意，在index.html中，引入css资源。

<link rel="stylesheet" href="/static/css/bootstrap.css">

第三个就是动态组件，因为Add部分和List部分都需要对评论部分作出操作，所以直接在根组件App中添加设置data，用来记录评论区的变化。设置好之后就需要组件间通信，把data传过去。然后List.vue中还需要声明，去接收传递过来的数据。

App.vue

List.vue

Item.vue

现在要怎么添加交互？

从绑定事件监听开始，和之前Vue绑定一样，先找到需要绑定的按钮，然后@click=“xxx”。

然后通过在App.vue组件中，写methods作出添加效果，然后传递到Add.vue。

也许在这里不禁会问，为什么一定要在App.vue写comment属性和addComment方法？

首先，是因为如果要传递对象属性或者方法，只能从根组件传递到子组件，因为我们拆分的时候就是这么拆的，我们用<Add/>这种方式将这一部分代码放到另一个组件，在需要的时候再挂上来，是这样的效果（当然也包括List和Item的关系，List相当于Item的根组件）。那也许你会问，我们不是import Add .. 了吗，从以前学习经验来讲，我们应该可以调用Add中暴露出的方法和属性才对？我们从代码中，可以看出来，我们import后，经过components映射出来的只有Add标签。组件化就类似于一种规范，帮助我们更好的实现一种层次结构，如果从子组件能传递属性到根组件，那就更乱了。这其中的细节有兴趣的需要去找找源码了。

正是因为上述特性，我们只能从根组件传递属性或方法到子组件，那如果Add添加评论，在List还要展示，那显然不能各自建对象属性，因为需要动态展示，在Add添加了评论就还得能传递到List中。所以需要通过在App组件中写对象属性，然后传递出去，这样删除、添加操作直接对App中属性进行操作即可。如下面代码。

也许在这里又会想到，既然之前说到传递后用prop接收后，就会变成这个组件自己的属性或方法，但是addComment方法显然需要在App组件中才能实现添加，因为Add组件中没有comments对象属性？实际上，我们传递的addComment，它是对根组件的对象属性作出的操作，传递出去，依然还是对根组件的对象属性作出操作，虽然在Add组件中接收了并成为它自己的一个方法。所以在Add中，接收了方法，使用了方法，并传递了一个参数，然后就会送回到App中，通过送回的参数对comments作出操作。这种就是Vue组件化的一个动态效果：交互。我们通过这种方式实现了不同组件化之间的联系。详细细节就需要看源码了。

App.vue

Add.vue

对于这一部分来说，确实有点乱，我自己最开始也很容易迷糊。但是对于这个流程、项目结构有了一个好的理解之后能好很多。

总结来说：

首先得设计好html+css，每个部分用div标签包围。根据流程先根据html页面拆分组件，这样才能更好的把结构理清。决定好之后，为每个组件命名，除了根组件外，其他组件可以放在一个统一的文件夹下。

组件有三部分，template、script和style，分别对应着html、js和css。template里一定要有个根标签，然后script向外默认暴露一个配置对象。

对于静态部分，我们只要把html和css拆分好，放入每个组件即能完成。对于每个组件之间的联系就要用到import，用到import就要映射组件标签components。如果想传递对象属性或者方法，需要在标签中传递<Add :comments="comments"/>。传递过去后，另一个组件就要接收，用到props，props一共有三种使用方式：

props:{ //指定属性名和属性值的类型      comment: Object}

props:{      addComment:{ //最完整写法：指定属性名/属性值的类型/必要性         type:Function,         required: true      }}

props: ['comments']

对于动态就需要我们手动去建一系列东西了，如果是按钮就@click="xxx"，再通过methods设置。如果要和组件对象属性统一，依然是v-model。

所涉及到的就下面这些用法：

当然还有很多其他的具体用法，大家可以去参考Vue的官方文档，毕竟那里有更准确的讲解，还有例子，这里就简单说明。

组件间通信2：自定义事件

我们刚才用很大篇幅，知道根组件（父组件）使用prop传递数据给子组件，子组件是不能跟父组件通信的，那如果想要实现这种功能，自定义事件系统就可以完成。

绑定事件监听

// 方式一: 通过 v-on 绑定@delete_todo="deleteTodo"// 方式二: 通过$on()this.$refs.xxx.$on('delete_todo', function (todo) {
       this.deleteTodo(todo)})

触发事件

// 触发事件(只能在父组件中接收)this.$emit(eventName, data)

注意:

此方式只用于子组件向父组件发送消息(数据)

问题: 隔代组件或兄弟组件间通信此种方式不合适

例：（之后全部没有完整代码，只有使用的演示，不能直接运行…）

比如在之前的代码里，我们需要父组件传递函数给子组件，现在有了自定义事件，我们就可以避免这种方式了。

App.vue

Add.vue

组件间通信3: 消息订阅与发布(PubSubJS 库)

想使用这种方式，需要安装：

npm i --save pubsub-js

订阅消息

PubSub.subscribe('msg', function(msg, data){})

发布消息

PubSub.publish('msg', data)

优点:

此方式可实现任意关系组件间通信(数据)

App.vue

Add.vue

组件间通信4: slot

此方式用于父组件向子组件传递标签数据

子组件: Child.vue

父组件: Parent.vue


   	
    
     xxx 对应的标签结构
    
	
    
     yyyy 对应的标签结构

例：

TodoFooter.vue

App.vue

用了这种方式以后，就相当于子组件用到的所有属性或方法全都需要从子组件移动到父组件中，除了样式。平常肯定不推荐这么使用，它用在什么地方呢？这样设计之后，比如可能会多次用到这个子组件（即：很多类似的组件，就没必要建好多个了，直接用这种模板就行了，只要在父组件中设置好slot，就能使用了），这样一来就能满足重用性。

转载地址：http://flyki.baihongyu.com/

你可能感兴趣的文章