一个vue的简单例子

参考：https://blog.csdn.net/nsrainbow/article/details/80589476

一个好的教程：

首先创建一个空的文件夹：

mkdir learn-vue

cd learn-vue

 

然后新建一个index.html文件：

 

此时的结构：

 

添加vue.js的引用：

 

创建DOM组件：

 

创建js组件：

 

完整的文件：

 

浏览器访问index.html：

 

webpack登场：

webpack是一个js打包工具，使用webpack你可以在一个js文件中使用 import 或者 require 来引用另外一个js文件中定义的组件。

不消说，这样你就可以把js组件分文件存放了。

创建package.json文件：

 

安装webpack

npm i --save-dev webpack webpack-cli

 

安装完毕后，此时package.json的内容为：

 

多了一个node_modules核package-lock.json。

 

通过webpack就可以把多个js文件打包成一个js文件。

使用了webpack就可以使用import语句来导入别的js文件。

好处1：不需要将公共库的js引用写到页面上来了，比如vue的引用就不需要写到index.html页面上了。

好处2：可以将你的所有js脚本可以按模块来分文件存放了。

 

现在开始抽离index.html中的js部分到独立的js文件中：

新建一个src文件夹，并在其中建立main.js。 并将index.html中的js语句移动到这个文件中，文件的内容为：

 

修改index.html中关于js的引用：

 

此时再次访问index.html，还是得到相同的结果：

 

但从上面的过程看，似乎没有什么区别。

只是简单的将部分js代码放到单独的文件了。截止到此时，还没有使用到webpack。

 

创建webpack的配置文件：

 

创建dist目录：

 

打包：

 

 

此时，main.js（入口文件）被打包为了bundle.js（出口文件）文件。

现在，修改index.html的引用：

再次访问：

 

截止到这里，没有什么大的变化。

短暂的总结：（目前经历了三版）

 

第一版：全部集中在一个文件。

第二版：将js部分拆分到main.js中。

第三版：将js部分打包到bundle.js中。

 

截止到现在，vue.js还是通过script的形式引入到index.html中，接下来要改变这种方式。

 

首先去除index.html中对于vue.js的引用：

 

问题是：我们的js脚本用到了Vue，但你现在去掉了vue.js的引用，岂不是要报错？

现在我们要换一种方式。

首先将vue安装到本地：

npm install --save vue

 

package.json的内容：

 

此时node_modules中也多了vue目录。

 

然后在main.js中引用vue：

 

再次构建一次项目：

npx webpack

 

浏览器访问index.html：

这是因为如果你直接写 import Vue from 'vue' 那么调用的是运行时的vue版本，这个版本不带模板解析包。

我们之前在index.html页面上引用的也不是运行时版本。

 

修改main.js：

 

再次打包：

 

现在访问index.html就正常了。

 

 

单文件组件（SFC）

一个 .vue文件就是一个组件，它的结构由三部分组成：

 

以下的结构是一个SFC文件的样子：

除了script元素外，template和style元素是可选的。也就是说，一个vue文件只需要script即可，template和style是可选的。

 

新建HelloVue组件

创建components目录，专门放置vue文件，作为组件的存放地。

在src目录下创建components目录，因为它是属于源码的一部分。

 

创建HelloVue.vue组件：

这是文件的初始化样子。

将之前写在index.html中的 {{ message }} 部分放置到HelloVue.vue的template里面。

将之前写在main.js中的new Vue()部分放置到HelloVue.vue的script里面。

 

使用组件之后，有以下不同：

1、不需要执行 new Vue 了，只需要用export default {...} 来定义组件即可

2、data属性变成一个方法了，该方法可以通过一串预处理过程得出一个json对象。

此处我们没有预处理过程，所以直接返回对象。

3、没有<style>，由于我们的例子很简单，所以就省略了<style>元素

 

另外，还需要修改index.html：

去掉了{{ message }}

 

vue在启动时会注册各个组件，每个组件的注册名就是name属性定义的值。各个组件之间可以通过name来调用。

比如你定义了HelloVue组件，那么在另外一个组件的模板中就可以使用以下方式来调用。

 

注意：vue组件中，template组件不是必须的，因为我们可以通过另一种方式来填写template。

template的部分被写到script里面了。

 

加载HelloVue组件

修改main.js：

 

解析vue文件：

因为webpack不认识vue，因此需要安装解释器，从而让webpack能认识vue。

npm i --save-dev vue-loader vue-template-compiler

 

安装之后，还要进行配置，这样在运行webpack的时候，它才会去使用这个解释器：

 

最后告诉webpack哪些文件需要用这个插件来解析。

所有以vue结尾的文件都用这个vue-loader来解释。

 

进行打包：

npx webpack

然后在浏览器访问index.html

 

当前的结构为：

 

 

用App.vue进行页面布局

App.vue作为所有vue组件的根组件。

如果使用App.vue，你可以把页面的基本结构，写到App.vue的<template>标签中。main.js就单纯负责启动就行了。

在src目录下建立App.vue文件：

 

然后修改main.js，让其只加载App.vue组件：

现在的结构：

 

访问index.html：

 

我们来看一个小区别：

当index.html为以下结构时：

如果App.vue的模板为：

其中<HelloVue>来自HelloVue.vue组件，模板为：

因此组装后：

<div id="app">

  <p>{{ message }}</p>

</div>

 

 

 

最终替换掉index.html中的占位部分：

 

假设我们将App.vue中的模板改为：

组装后：

<p>{{ message }}</p>

 

替换掉index.html中的占位部分：

 

上面这些只是为了说明，index.html中的<div id="app"></div>只是一个占位符，最终会被替换。

 

注意：在组件文件中，只能出现一个根元素，不能出现多个。

比如：

这种写法是错的。

应该改为：

 

错误：

正确：

 

 

使用html-webpack-plugin自动插入脚本

这里的bundle.js是我们手动填写的，而且没有版本。

使用该插件之后，我们可以删除index.html中的script部分，之后在npx webpack后，会自动填入到index.html中。

首先去除index.html中的script部分：

 

安装插件

npm i --save-dev html-webpack-plugin

 

然后在配置文件中配置：

 

打包

npx webpack

 

打包之后，会在dist目录多一个index.html文件：

bundle.js自动插入，并且多了hash数字。

 

最后的结构：