vue 项目搭建的几种方式

最新推荐文章于 2024-08-29 16:21:36 发布

dralexsanderl

最新推荐文章于 2024-08-29 16:21:36 发布

阅读量818

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_42880714/article/details/127822761

版权

vue 专栏收录该内容

36 篇文章

订阅专栏

本文详细介绍了Vue项目的四种搭建方法：通过CDN引入、使用esmodule、vue-cli以及vite和webpack。vue-cli是官方提供的命令行工具，方便快速创建大型应用，而vite和webpack则提供了更灵活的构建选项。无论你是初学者还是有经验的开发者，都能找到适合自己的搭建方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 项目搭建的几种方式

`cdn`引入

在jsdelivr找到你想要使用的Vue版本后复制链接，在<script> 标签引入，Vue 会被注册为一个全局变量。

比如想使用最新的版本vue@3.2.45

vue@3.2.45

点击第一个就会打开对应的文件资源。

https://cdn.jsdelivr.net/npm/vue@3.2.45/dist/vue.global.min.js

这时候在项目中的添加一个<script>标签，把上方的链接引入进去就可以使用vue了。

<script src="https://cdn.jsdelivr.net/npm/vue@3.2.45/dist/vue.global.min.js"></script>
<body>
  <div id="app">{{value}}</div>
</body>
<script>
  Vue.createApp({
    data() {
      return {
        value: "Hello Vue!",
      };
    },
  }).mount("#app");
</script>

除此之外，还可以使用es module的引入方式。

<body>
  <div id="app">{{value}}</div>
</body>
<script type="module">
  import { createApp } from "https://cdn.jsdelivr.net/npm/vue@3.2.45/dist/vue.esm-browser.js";
  createApp({
    data() {
      return {
        value: "Hello Vue!",
      };
    },
  }).mount("#app");
</script>

如果cdn请求超时，可以先将文件资源下载在项目中，后在<script>标签中引入项目中的资源。

注意：在引入链接时有些资源携带了runtime字段，这个表示非完整版（不支持template写法，只能使用render函数）

`vue-cli`

vue-cli是官方提供的命令行工具，可用于快速搭建大型单页应用。

npm i vue-cli -g

在安装好后，我们可以使用三个命令来创建项目: vue create 、 vue init 和 vue ui

`vue create`

是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与vue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档。

vue create [options] <app-name>

vue create demo1

运行之后需要选择一些配置。

vue-cli提供了两个预设模板，当然你也可以自行配置。

vue-cli项目预设

`vue init`

vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。

vue init [options] <template> <app-name>

vue init webpack demo2

之后按步骤进行配置即可。

`vue ui`

通过这条命令可以打开一个管理Vue项目的可视化页面。

`create-vue`

目前vue-cli正处于维护阶段，如果想要创建新项目，建议使用这种方式。

npm create vue@3

vue3并不支持ie，你可以使用vue2

npm create vue@2

之后按照步骤进行配置即可。

create-vue步骤

其他方式

create-vue是基于vite搭建的，而vue-cli是基于webpack搭建的一个脚手架工具，我们也可以通过vite或者webpack自己搭建一个项目。

使用`vite`搭建项目

安装vite

npm create vite@latest

执行命令后按照步骤选择一个框架（vue或者react等）即可。

使用`webpack`搭建

在项目中安装webpack相关库及vue。

npm i webpack webpack-cli html-webpack-plugin style-loader css-loader vue vue-loader -D

在webpack.config.js文件中进行配置。

const HTMLWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
  entry: "./src/index.js",
  plugins: [
    new HTMLWebpackPlugin({
      template: "./public/index.html",
    }),
    new VueLoaderPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.vue$/,
        use: ["vue-loader"],
      },
    ],
  },
  devServer: {
    port: 8081,
    hot: true,
    compress: true,
  },
};