Installing and Setting up Vue

本文介绍如何通过CDN加载Vue.js核心库及其推荐版本,并演示如何在HTML中引入Vue.js及Axios库进行HTTP请求。此外还提供了初始化Vue实例的示例。

Installing Vue.js

  • Core library
  • Available via Content Delivery Network(CDN)
  • unpkg is recommended


Vue.js umpkg Url
https://unpkg.com/vue

Vue.js 2.2.5
https://unpkg.com/vue@2.2.5

Vue.js CDN Url
https://unpkg.com/vue@[version]/dist/vue.min.js

// Vue.js Script Tag
<script
	type="text/javascript"
	src="https://unpkg.com/vue@2.2.5/dist/vue.min.js">
</script>
// Adding Vue
<html>
	<head>
		<title>Growler</title>
	</head>
	<body>
		<div id="groler"></div>
		<script
			type="text/javascript"
			src="https://unpkg.com/vue">
		</script>
	</body>
</html>
-----------------------------------

Axios

  • Recommended library for making HTTP requests
  • Not part of Vue.js

Axios
https://unpkg.com/axios/dist/axios.min.js

// Adding Axios
<html>
	<head>
		<title>Growler</title>
	</head>
	<body>
		<div id="groler"></div>
		<script type="text/javascript" src="https://unpkg.com/vue"></script>
		<script 
			type="text/javascript" 
			src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</body>
</html>

Initializing an Instance of Vue

http://blog.youkuaiyun.com/u012596785/article/details/79463841



### Vue 3 Project Plugins List and Usage In a Vue 3 project created using Vue CLI, several plugins can be included based on the selected features during setup. For instance, when manually selecting features such as Babel, Router, CSS Pre-processors, and Linter, these choices determine which plugins will be part of the project configuration[^1]. For projects initialized through Vue CLI, after choosing desired configurations including specific versions like 3.x for Vue.js, the creation process involves setting up necessary files along with initializing repositories and installing relevant packages that serve as plugins or development tools[^2]. When configuring a project with Vite instead of Vue CLI, an alternative approach is taken where imports are explicitly defined within the `vite.config.js` file. Here, various plugins are introduced not only to enhance functionality but also integrate component libraries seamlessly into the application. An example includes importing `@vitejs/plugin-vue`, which provides support for `.vue` single-file components in conjunction with other utilities enhancing developer experience by automating tasks related to code splitting, hot module replacement among others[^3]. #### Commonly Used Plugins in Vue 3 Projects - **Babel**: Enables writing next generation JS code. - **Vue Router**: Official router for navigating between views. - **CSS Preprocessors**: Tools like SASS/SCSS allow more maintainable stylesheets. - **ESLint Plugin**: Helps enforce coding standards via linting rules. - **Vite Plugins**: - `@vitejs/plugin-vue`: Supports .vue files processing. - `unplugin-vue-components/vite`: Automatically registers components globally without manual imports. - `unplugin-vue-components/resolvers/VantResolver()`: Facilitates automatic registration specifically for Vant UI library components. ```javascript // Example vite.config.js snippet showing plugin usage import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [ vue(), // Additional plugins here... ], }); ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值