不使用webpack怎么写vue
时间: 2023-12-30 12:04:58 浏览: 32
Vue.js 是一个基于 MVVM 模式的渐进式 JavaScript 框架,使用 Vue.js 可以方便地构建单页面应用程序(SPA)和可重用的组件。虽然 Vue.js 建议使用 webpack 构建应用,但你也可以使用其他构建工具或者手动构建来开发 Vue.js 应用程序。
下面是一个不使用 webpack 构建 Vue.js 应用程序的示例:
1. 创建 HTML 文件
创建一个 HTML 文件,例如 index.html,用于加载 Vue.js 和应用程序的入口文件。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js Without Webpack</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="app.js"></script>
</body>
</html>
```
2. 创建应用程序的入口文件
创建一个 JavaScript 文件,例如 app.js,用于创建 Vue 实例和定义组件。
```js
// 定义组件
var MyComponent = Vue.extend({
template: '<div>Hello, {{ name }}!</div>',
data: function () {
return {
name: 'world'
}
}
})
// 创建 Vue 实例
new Vue({
el: '#app',
components: {
'my-component': MyComponent
}
})
```
在上面的代码中,我们定义了一个名为 `MyComponent` 的组件,并使用 `Vue.extend` 方法来创建一个扩展的 Vue 构造器。然后,我们创建了一个 Vue 实例,并在 `components` 选项中注册了 `MyComponent` 组件。
3. 运行应用程序
将上述两个文件保存到同一个目录下,然后用浏览器打开 index.html 文件即可运行应用程序。
需要注意的是,这种方式不支持 ES6 模块,因此你需要使用旧的 CommonJS 或 AMD 模块规范,并手动处理依赖关系。另外,这种方式也不支持自动重载和代码分离等高级特性,因此不适合大型应用程序的开发。