Javascript

一个vue的简单例子

本文主要是介绍一个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就正常了。

 

这篇关于一个vue的简单例子的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!