vue怎么在纯js文件中引用

在纯JavaScript文件中引用Vue

在纯JavaScript文件中引用Vue的方法包括通过CDN引入Vue、使用Vue CLI创建项目、模块化引入Vue。接下来我们将详细介绍其中一种方法——通过CDN引入Vue。

通过CDN引入Vue是最简单的方法之一，特别适合那些不使用模块打包工具的项目。您只需要在HTML文件中添加一行脚本标签即可。

一、通过CDN引入Vue

通过CDN引入Vue的方法非常简单，只需要在HTML文件的<head>或者<body>标签中添加以下脚本标签：

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

这样，您就可以在项目中的JavaScript文件中使用Vue了。

示例代码

以下是一个完整的示例代码，展示了如何通过CDN引入Vue并在纯JavaScript文件中使用它。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue in Pure JS</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="main.js" defer></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
</body>
</html>

main.js

document.addEventListener('DOMContentLoaded', function() {
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    });
});

在上面的示例中，我们通过CDN引入了Vue，并在main.js文件中创建了一个新的Vue实例。这个实例绑定到HTML中的<div id="app">，并且在数据中定义了一个message属性，显示“Hello Vue!”。

二、使用Vue CLI创建项目

使用Vue CLI创建项目可以提供更好的开发体验和更多的功能，比如热重载、单文件组件和模块化开发。

安装Vue CLI

首先，您需要确保已经安装了Node.js和npm。然后，您可以通过以下命令全局安装Vue CLI：

npm install -g @vue/cli

创建新项目

安装完成后，您可以使用以下命令创建一个新的Vue项目：

vue create my-project

按照提示选择配置选项，完成项目创建。

在JavaScript文件中引用Vue

在Vue CLI创建的项目中，您可以直接在src目录下的JavaScript文件中引用Vue。例如，在src/main.js中：

import Vue from 'vue';
import App from './App.vue';
Vue.config.productionTip = false;
new Vue({
  render: h => h(App),
}).$mount('#app');

三、模块化引入Vue

如果您使用模块打包工具（如Webpack、Rollup）进行项目开发，您可以通过npm安装Vue并在JavaScript文件中模块化引入。

安装Vue

使用以下命令安装Vue：

npm install vue

在JavaScript文件中引入Vue

在安装完成后，您可以在JavaScript文件中模块化引入Vue：

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

配置Webpack

如果您使用Webpack进行打包，确保在webpack.config.js中正确配置了Vue：

const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
    entry: './src/main.js',
    module: {
        rules: [
            {
                test: /.vue$/,
                loader: 'vue-loader'
            },
            // 其他规则
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
};

四、使用第三方库

在实际项目中，您可能需要使用一些第三方库来增强开发体验。以下是一些常用的库和工具：

Vue Router

Vue Router是Vue.js官方的路由管理器，适用于单页面应用（SPA）。

安装

npm install vue-router

使用

在src/router.js中：

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
Vue.use(Router);
export default new Router({
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        // 其他路由
    ]
});

在src/main.js中：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

Vuex

Vuex是Vue.js的状态管理库，适用于中大型应用。

安装

npm install vuex

使用

在src/store.js中：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
    state: {
        message: 'Hello Vuex!'
    },
    mutations: {
        setMessage(state, message) {
            state.message = message;
        }
    },
    actions: {
        updateMessage({ commit }, message) {
            commit('setMessage', message);
        }
    }
});