VUE 从0到1的过程

最新推荐文章于 2024-07-20 15:35:02 发布

优拉Ula

最新推荐文章于 2024-07-20 15:35:02 发布

阅读量508

点赞数

分类专栏： VUE 文章标签： VUE

本文链接：https://blog.csdn.net/wxcwhk1/article/details/102589923

版权

VUE 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

目标：从无到有开始学习VUE

创建一个最简单的VUE例子

创建一个最简单的VUE例子

记录一下学习的东西

创建一个最简单的html页面

创建一个空的文件夹，我一般用tomcat作为服务器，所以在webapp中建立文件夹。

1.mkdir learnvue
2.cd learnvue

然后新建一个页面index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>learn-vue</title>
  </head>
  <body>
	Hello World
  </body>
</html>

启动tomcat，访问该网站显示
在这里插入图片描述

最简单的调用VUE的方式

在网页上直接调用vue的js 文件。

添加vue的js引用

首先，从官网上的vue.js 的源文件调用代码直接拷贝到index.html页面

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

创建dom对象

vue将页面上的元素都看作一个个组件，叫做dom组件，然后抽象到js内存中就叫做抽象模型，叫做js组件。通过对js组件的操作就可以达到对dom组件的操作。

VUE是由html元素+js脚本+css样式组成的。其中css样式是可选的，我们暂且舍弃，现在先些都一个html模板。

我们把之前的hello world换成如下的代码

<div id="app">
	<p>{{message}}</p>
</div>

其中{{message}}是vue的模板语言语法，表示输出message变量的内容。定义div的id属性，方便js脚本定位它，并把它抽象成一个对象。

抽象成js组件

然后，我们写js脚本。在刚刚创建的dom对象和body之间插入script代码

<script>
	new Vue({
		el:'#app',
		data:{
			message:'hello vue.js!'
		}
	})
</script>

new Vue表示创建一个dom对象对应的抽象对象，el属性定义通过selector选择器来获取到这个对象对应的dom，因为知道id=app，所以选择用#app。

渲染页面

Vue将dom对象抽象成js对象之后，就会对其进行渲染，{{message}}就会渲染成真正你想显示在页面上的文本。data属性定义了渲染这个dom对象的数据的集合。

完成的页面代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>learn-vue</title>
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js!'
        }
      })
      </script>
  </body>
</html>

这就是一个最简单的Vue调用的例子。

Vue的调用过程，图示

在这里插入图片描述

进阶一下，Vue结构化

想要工程项目结构化，需要webpack。

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

强调： webpack是vue的组成部分，或者是必不可少的部分

webpack安装

首先在文件夹的根目录下建立一个package.json文件

{
	"name":"learnvue",
	"version":"1.0.0"
}

现在文件夹learnvue中共有两个文件index.html和package.json。
输入如下命令：

npm i --save-dev webpack webpack-cli

运行完该指令后，npm自动将webpack和webpack-cli写到了package.json中。代码如下所示：


{
    "name": "learn-vue",
    "version": "1.0.0",
    "devDependencies": {
        "webpack": "^4.12.1",
        "webpack-cli": "^3.0.8"
    }
}

现在learnvue中有这四个文件
在这里插入图片描述
webpack可以使用import导入其他的js文件，然后将多个js 文件打包成一个js文件。

将html模板中的js脚本抽取成一个js文件

新建src文件夹，并在其中建立main.js。将index.html文件中的js脚本移动到该文件中，代码如下：

new Vue({
     el: '#app',
     data: {
       message: 'Hello Vue.js!'
     }
})

将index.html中的这段代码替换成

<script src="src/main.js"></script>

重新访问index.html，仍然能够看到hello vue.js!

项目中使用webpack

以上内容仍然没有使用webpack，接下来开始正式使用它。在根目录下新建webpack.config.js文件，这是webpack的配置文件。代码如下：

var path = require('path');  //引入Node.js的path模块，提供了一些处理文件路径的小工具，直接引用就可以使用
 
module.exports = {
  mode: 'development',
  entry: './src/main.js',  //打包的入口文件   src打包前的源文件
  output: {  //打包完的输出文件
    path: path.resolve(__dirname, 'dist'),   //打包输出文件的目录  ./dist  也可以
    filename: 'bundle.js'  //打包输出的文件名
  }
};

需要新建输出文件目录dist

mkdir dist

在根目录下运行

npx webpack

如果你看到类似的输出

$ npx webpack
Hash: 5b16bee4aec18c534801
Version: webpack 4.12.1
Time: 62ms
Built at: 2018-06-27 01:00:04
    Asset      Size  Chunks             Chunk Names
bundle.js  3.84 KiB    main  [emitted]  main
[./src/main.js] 77 bytes {main} [built]

表示你已经成功构建第一个webpack打包文件。
然后修改index.html对main.js的引用为对bundle.hs的引用

<script src="dist/bundle.js"></script>

然后在访问index.html页面，仍然能够看到hello vue.js

此时的工程结构：
在这里插入图片描述
接下来，将vue的引用从html页面去除掉

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

修改main.js，在头部添加

import Vue from 'vue'

我们的mian.js 代码如下：

import Vue from 'vue'
 
new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js!'
    }
})

然后下载vue源码
npm i --save vue
运行之后，package.json中的代码添加了vue：

{
    "name": "learn-vue",
    "version": "1.0.0",
    "devDependencies": {
        "webpack": "^4.12.1",
        "webpack-cli": "^3.0.8"
    },
    "dependencies": {
        "vue": "^2.5.16"
    }
}

node_modules文件夹下也增加了vue的包。

使用webpack重新构建一下项目：

$ npx webpack
Hash: cd3c4ea4c7c76aeb5beb
Version: webpack 4.12.1
Time: 410ms
Built at: 2018-06-27 01:16:20
    Asset     Size  Chunks             Chunk Names
bundle.js  235 KiB    main  [emitted]  main
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {main} [built]
[./src/main.js] 100 bytes {main} [built]
    + 4 hidden modules

构建成功之后，会把整个vue的代码都压缩写进bundle.js 文件中。

刷新index.html页面，不显示任何信息。控制台有如下提示信息：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

如果直接写 import Vue from ‘vue’，调用的是运行的vue，不带有模板解析器，我们之前在index.html引用的也不是运行的vue，所以正确的代码应该是：

import Vue from 'vue/dist/vue.js'

重新打包构建，正常显示。

下一篇：通过组件的形式再次对项目进行结构化处理

参考文献：

优拉Ula

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE 从0到1的过程

目标：从无到有开始学习VUE创建一个最简单的VUE例子创建一个最简单的html页面最简单的调用VUE的方式添加vue的js引用创建dom对象抽象成js组件渲染页面Vue的调用过程，图示进阶一下，Vue结构化webpack安装创建一个最简单的VUE例子记录一下学习的东西创建一个最简单的html页面创建一个空的文件夹，我一般用tomcat作为服务器，所以在webapp中建立文件夹。1.mkd...
复制链接

扫一扫

专栏目录