当前位置: 首页 > article >正文

除了Vue CLI,还有哪些方式可以创建 Vue 项目?

是的,除了使用 Vue CLI 之外,还有其他几种方式可以创建 Vue 项目。以下是一些常见的方法:

1. 使用 Vue.js CDN

你可以直接在 HTML 文件中引入 Vue.js 的 CDN 链接,然后在 JavaScript 中使用 Vue.js。这种方法适合小型项目或快速原型设计。

<!DOCTYPE html>
<html>
  <head>
    <title>My Vue App</title>
    <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>

2. 使用 Vite

Vite 是一个由 Evan You(Vue.js 的创建者)开发的新型构建工具,旨在提供更快的开发体验。它可以用来创建 Vue 项目,并且支持热模块替换(HMR)和其他高级功能。

首先,安装 Vite:

npm install -g vite

然后,创建一个新的 Vue 项目:

vite create my-vue-app

3. 使用 Webpack

Webpack 是一个流行的模块打包工具,可以用来创建 Vue 项目。虽然设置 Webpack 可能需要更多的工作,但它提供了更高的定制性和灵活性。

首先,安装 Webpack 和相关的插件:

npm install webpack webpack-cli webpack-dev-server vue-loader vue-template-compiler --save-dev

然后,创建一个 webpack.config.js 文件来配置 Webpack:

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.esm.js'
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ],
  devServer: {
    contentBase: './dist',
    overlay: true
  }
};

最后,创建一个 package.json 文件并添加以下脚本:

{
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --open"
  }
}

现在,你可以使用以下命令来构建和运行你的 Vue 项目:

npm run build
npm run dev

以上就是几种常见的创建 Vue 项目的方法。每种方法都有其优缺点,选择哪种方法取决于你的项目需求和个人偏好。


http://www.kler.cn/a/379515.html

相关文章:

  • C#属性 Property
  • vue系列==vue路由
  • 3105. 最长的严格递增或递减子数组
  • windows在两台机器上测试 MySQL 集群实现实时备份
  • 《Python游戏编程入门》注-第4章8
  • HTML5实现小鸟过管道小游戏源码
  • Spring Boot 集成 Kafka
  • BERT的新闻标题生成
  • pip install -r requirements.txt下载速度慢
  • 跨越科技与文化的桥梁——ROSCon China 2024 即将盛大开幕
  • openstack之guardian介绍与实例创建过程
  • C语言实现力扣第31题:下一个排列
  • 重大917该如何复习?难度大不大?重点是啥?
  • Bacnet+springboot部署到linux后,无法检测到网络中的其他设备
  • 项目解决方案:跨不同的物理网络实现视频监控多画面的实时视频的顺畅访问
  • 代码笔录1
  • LeetCode25:K个一组翻转链表
  • LeetCode 19. 删除链表的倒数第 N 个结点(java)
  • Java Iterator 实现杨辉三角
  • Redis 补充概念
  • Unity 6 基础教程(Unity 界面)
  • 百度搜索引擎的工作原理
  • javaScript-----一维数组和数组对象去重的多种方法
  • 使用 MySQL Workbench 创建和管理用户
  • 手册更新 | RK3568开发板Openwrt文件系统构建
  • ClkLog企业版(CDP)预售开启,更有鸿蒙SDK前来助力