创建Vue项目的几种方法

别叫我升升

已于 2023-04-16 00:01:20 修改

阅读量363

点赞数 9

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

于 2023-04-15 23:18:02 首次发布

本文链接：https://blog.csdn.net/JUNSAN_jason/article/details/130176817

版权

vue学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、在网页中创建Vue项目（开发中不常用，可以当做练手）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    //通过src引入vue包
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        const Root = {
            data(){
                return{
                    message:"hahaha!"//data方法返回的对象，其中的属性会自动添加到组件实例中
                                    //root叫组件，根据root创建出来的叫组件实例
                                    //root就是用来创建组件实例的（vm）
                }
            },
            //在模板中可以直接访问组件实例中的属性
            template:"<h1>我爱vue{{message}}</h1>" //希望组件在页面中呈现的样子   
        }

        // 创建app实例
        const app = Vue.createApp(Root)
        console.log(app);
        // 将实例挂载到id=app的div中
        app.mount("#app")
    </script>
</body>
</html>

2、使用Vite构建工具创建Vue项目

第1步、使用vite构建项目需要做以下的准备工作

//首先初始化项目
yarn init -y

//要使用vite构建工具构建vue项目，需要安装vite依赖。
yarn add vite -D

//安装vue 
yarn add vue

第2步、创建一个index.html文件

将type设置成 module ，这里的src就不需要引入vue包了，因为我们已经在第一步用yarn安装过vue了，我们只需要在后续创建一个js文件，然后引入即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    //将type设置成 module ，这里的src就不需要引入vue包了，因为我们已经在第一步用yarn安装过vue了，
      我们只需要在后续创建一个js文件，然后引入即可。
    <script type="module" src="./src/index.js"></script>
</head>
<body>
    <div id="root"></div>
</body>
</html>

第3步创建一个index.js 并写下如下代码，这个文件相就是主文件

//这里的createApp就不需要通过第一种方法用Vue.createApp调用了，直接引入即可
import {createApp} from "vue/dist/vue.esm-bundler.js"

const App = {
        data(){
            return{
                msg:"hahaha"
            }
        },
        template:"<h1>{{msg}}</h1>"
  
}

createApp(App).mount("#root")

第4步我们可以更精简，把App提出来创建一个App.vue并写下如下代码

<script>
    export default{
        data(){
            return{
                msg:"hahaha"
            }
        }
    }
</script>

<template>
    <h1>{{ msg }}</h1>
</template>

那我们之前的 index.js主文件就可以改成这样了

import {createApp} from "vue/dist/vue.esm-bundler.js"

import App from "./App.vue"

createApp(App).mount("#root")

3、使用npm、yarn等自动创建Vue项目

//使用yarn或者npm自动安装
yarn create vue 

//安装完是没有yarn依赖的，所以通过需要安装yarn依赖，可直接通过如下代码安装
yarn

别叫我升升

关注

9
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
创建Vue项目的几种方法

使用vite构建项目需要做以下的准备工作。
复制链接

扫一扫

专栏目录

创建Vue项目的几种方法

1、在网页中创建Vue项目（开发中不常用，可以当做练手）

2、使用Vite构建工具创建Vue项目

3、使用npm、yarn等自动创建Vue项目

“相关推荐”对你有帮助么？