当前位置：首页 > news >正文

前端框架笔记

news 2026/2/7 22:55:16

Vue.js的安装

安装Vue.js有两种方法：

（1）类似于Bootstrap或jQuery，直接通过HTML文件中的标签引用。为了方便开发者使用，Vue.js提供了相关的CDN，通过如下代码可以引用最新版本的Vue.js：

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

通过指定版本号，可以引用不同版本的Vue.js，这样项目工程不会因为新版本的Vue.js而出现不兼容的问题。

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

除了CDN方式外，还可以下载源代码直接引入。对于一个大型项目而言，直接引入JavaScript文件的方式可能并不便捷，所以笔者采用npm的安装方式。

（2）npm安装方式。
新建项目文件夹，使用npm init命令初始化项目，然后使用如下命令安装Vue.js，与Express的安装步骤一样。
npm install vue
package.json文件会自动添加Vue.js的依赖项，代码如下：

` {"name": "2-3-2","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","dependencies": {"vue": "^2.6.10"}}`用Vue.js编写Hello World——CDN方式

介绍了安装Vue.js的两种方式，第一种是通过CDN方式或引入静态文件，通过CDN方式编写Hello World程序较为简单，下面直接演示。

【示例】用Vue.js编写HelloWorld——1。
新建HTML文件，命名为index.html，引入Vue.js。完整的代码如下：
`

 01 <!--HelloWorld-->02 <html lang="en">03 <head>04     <meta charset="UTF-8">05     <title>Title</title>06 </head>07 <body>08 <div id="app">09     <!--显示文字内容-->10         {{text}}     11 </div>12 <!--引入Vue-->      13   <script src="https://cdn.jsdelivr.net/npm/vue"></script>14 <script>15     <!--实例化Vue-->16     var vm = new Vue({17         el: '#app',                             //指定属性id里的app18         //数据内容19         data: {20             text: 'hello world!!!'21         }22     })23 </script>24 </body>25 </html> `

通过浏览器打开index.html，网页效果如图

用Vue.js编写Hello World——Webpack方式

对于Vue.js框架而言，输出一个简单的Hello World程序可能并不简单，浏览器本身不识别后缀为vue的文件，所以vue文件不能通过浏览器直接打开，类似于HTML这样的页面也无法直接引入vue文件。
如果想要使用Vue.js编写程序，需要Webpack打包工具将.vue文件编译成普通的JavaScript文件，再通过页面的引入去执行这个JavaScript文件。

【示例2-5】用Vue.js编写HelloWorld——2。

（1）新建项目工程，使用npm init初始化项目代码，此时生成package.json文件，接着安装Webpack，命令如下：
npm install webpack

（2）Webpack安装后需要再安装webpack-cli（一个使用Webpack的命令行工具），命令如下：
npm install webpack-cli

（3）安装Vue.js，命令如下：
npm install vue

（4）安装vue-loader和vue-template-compiler，这样才可以让Webpack识别Vue.js，安装命令如下：
npm install vue-loader
npm install vue-template-compiler

安装完成后的package.json文件如下：

 `{"name": "2-3-2","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","dependencies": {"vue": "^2.6.10","vue-loader": "^15.7.1","vue-template-compiler": "^2.6.10"},"devDependencies": {"webpack": "^4.39.3","webpack-cli": "^3.3.7"}`

（5）新建一个webpack.config.js文件，用于配置Webpack打包工具。Webpack的配置需要指定入口文件并且引入vue-loader，完整的代码如下：

 `01 const path = require('path');02 const VueLoaderPlugin = require('vue-loader/lib/plugin');03 04 module.exports = {05     //指定入口文件06     entry:path.join(__dirname, 'app.js'),07     //指定输出的文件位置和文件名称08     output: {09         path: path.join(__dirname,'dist'),10         filename: 'build.js'11     },12     plugins: [13         //在使用新版的vue-loader时，必须引入这个插件14         new VueLoaderPlugin()15     ],16     module: {17         //指定不同格式的规则18         rules: [19             //解析.vue文件20             {21                 test: /\.vue$/,22                 loader: 'vue-loader'23             },24         ]25     }26 }`

这里指定了入口文件导出的位置和引入模块时的一些规则，通过这个配置让Webpack可以编译同级目录中的app.js文件，并且在dist文件夹中建立新的build.js作为导出的文件。

（6）编辑app.js中的内容。在app.js中需要引入Vue.js、获取页面中的body节点，并且将所有需要显示的内容挂载在上面，完整的代码如下：

` 01 //引入vue02 import Vue from 'vue'03 import Hello from './helloworld.vue';04 05 const root = document.createElement('div')06 document.body.appendChild(root)07 08 //mount将Hello模块挂载到root根节点中09 new Vue({10     render: (h) => h(Hello)11 }).$mount(root)`

（7）上述代码引入了一个还未建立的Hello模块，其文件名为helloworld.vue，也就是本例的Vue.js部分，该文件中指定了一个变量，赋值为HelloWorld并显示在页面上。

 01 <template>02     <div>03         <p>{{text}}</p>04     </div>05 </template>06 07 <script>08     export default{09         name: "Hello",10         data(){11             return {12                 text: 'HelloWorld!!!'13             }14         }15     }16

其中，{{text}}部分显示下方script/data中text的值“HelloWorld!!!”，而模板的部分将会被挂载在一个HTML文件的body节点中，最终将所有的内容显示在页面中。

（8）Hello World实例到此就完成了。在命令行中使用如下命令打包：
webpack --config webpack.config.js
也可以将此命令添加到package.json中，通过webpack-cli的方式使用，这样会更加方便。修改后的代码如下：

{"name": "2-3-2","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack --config webpack.config.js"},"author": "",……}

在命令行窗口中使用如下命令完成打包操作，
npm run build

前端框架笔记

Vue.js的安装

相关文章：

前端框架笔记

详细设计文档

Java011——Java数据类型转换（基本数据类型）

mybatis-plus用法（二）

SQL笔记-存储过程+循环

HNU-操作系统OS-作业1（4-9章）

springboot 精华

我用ChatGPT写2023高考语文作文（三）：新课标I卷

HTML 标签的学习

计算耗时为微秒的方法(包含：时/分/秒/毫秒/微秒/纳秒)

通过 Python 封装关键词搜索阿里巴巴商品api接口

分布式光伏消纳的微电网群共享储能配置策略研究（Matlab代码实现）

C语言写网络爬虫总体思路

机器学习实战六步法之训练模型、优化模型、部署模型（七）

《C++高级编程》读书笔记（七：内存管理）

Scrum团队的三个角色

python环境中使用 requirement.txt 安装依赖

UE5 材质常用大全

笔记本安装centos操作系统

Polarion工作流插件(自定义)

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

WordPress插件：AI多语言写作与智能配图、免费AI模型、SEO文章生成

（转）什么是DockerCompose?它有什么作用？

第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码

2025季度云服务器排行榜

Java + Spring Boot + Mybatis 实现批量插入

C++ 设计模式《小明的奶茶加料风波》

逻辑回归暴力训练预测金融欺诈