怎么script引入vue.js

在HTML页面中引入Vue.js的脚本可以通过以下几种方式：使用CDN、下载并本地引入、通过NPM管理工具引入。 推荐使用CDN，因为它简单快捷，适合初学者和简单项目。以下是详细步骤和介绍。

一、使用CDN引入Vue.js

CDN（内容分发网络）是最简单的方式，只需在HTML文件的<head>标签中添加一行代码即可。

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Demo</title>
  <!-- 引入Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    });
  </script>
</body>
</html>

二、下载并本地引入Vue.js

如果你希望在没有网络的环境下使用Vue.js，或者希望控制使用的Vue.js版本，可以下载Vue.js文件并在本地引入。

1. 下载Vue.js

访问 Vue.js官网下载Vue.js文件。

2. 本地引入Vue.js

将下载的Vue.js文件放在项目目录中，然后在HTML文件中引用：

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Demo</title>
  <!-- 引入本地Vue.js -->
  <script src="js/vue.js"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    });
  </script>
</body>
</html>

三、通过NPM管理工具引入Vue.js

对于大型项目或需要使用模块化开发的项目，建议使用NPM（Node Package Manager）引入Vue.js。

1. 初始化项目

在项目目录下运行以下命令来初始化一个新的NPM项目：

npm init -y

2. 安装Vue.js

运行以下命令来安装Vue.js：

npm install vue

3. 创建项目结构

创建一个简单的项目结构：

my-vue-project/ ├── index.html ├── package.json └── src/ └── main.js

4. 在HTML文件中引入Vue.js

在index.html文件中引入main.js：

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js NPM Demo</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script src="src/main.js"></script>
</body>
</html>

5. 配置`main.js`

在src/main.js文件中引入Vue.js并初始化Vue实例：

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

四、使用模块化开发引入Vue.js

在现代JavaScript开发中，模块化开发是主流方式。这里介绍如何使用Webpack和Babel进行模块化开发。

1. 安装Webpack和Babel

运行以下命令安装Webpack和Babel：

npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env vue-loader vue-template-compiler --save-dev

2. 配置Webpack

在项目根目录下创建webpack.config.js文件并添加以下配置：

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

3. 配置Babel

在项目根目录下创建.babelrc文件并添加以下配置：

{
  "presets": ["@babel/preset-env"]
}

4. 创建项目结构

创建一个简单的项目结构：

my-vue-project/ ├── dist/ ├── node_modules/ ├── src/ │ ├── App.vue │ └── main.js ├── .babelrc ├── package.json └── webpack.config.js

5. 配置`App.vue`

在src/App.vue文件中添加以下内容：

<template>
  <div id="app">
    {{ message }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
};
</script>

6. 配置`main.js`

在src/main.js文件中引入Vue.js和App.vue组件，并初始化Vue实例：

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

7. 构建项目

运行以下命令构建项目：

npx webpack

8. 引入构建后的文件

在index.html文件中引入构建后的bundle.js文件：

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Webpack Demo</title>
</head>
<body>
  <div id="app"></div>
  <script src="dist/bundle.js"></script>
</body>
</html>

通过上述步骤，你可以使用不同的方式在HTML页面中引入Vue.js，并根据项目需求选择适合的方式。从简单的CDN引入到复杂的模块化开发，每种方法都有其适用的场景和优缺点。希望这些内容能帮助你更好地理解和使用Vue.js。