Vue3.0学习 - 第二节，Vue3 项目创建

青旅半醒 2022-11-18 01:47 163阅读 0赞

创建 Vue3 的三种方式

*  Vue-Cli
 *  Webpack
 *  Vite

我用 Vite （尤自创的方案），另外两种方法请自己搜索。

*  Vite 的实现原理是利用 ES6 的 import 会发送请求去加载文件的特性，拦截这些请求，做一些预编译，省去 webpack 冗长的打包时间。

1、安装vite

npm install -g create-vite-app

1、利用 Vite 创建 Vue3 项目

vue3.0.4

create-vite-app projectName

3.0.5

npm init @vitejs/app hello-vue3 # OR yarn create @vitejs/app hello-vue3（项目名称）

可供选择的模板，本文选择Vue  模板详细解释 [点击这里][Link 1]

Select a template: … 
      vanilla
    ❯ vue
      vue-ts
      react
      react-ts
      preact
      preact-ts
      lit-element
      lit-element-ts
      svelte
      svelte-ts

2、安装依赖、运行项目

cd projectName
    npm install
    npm run dev

3、打包

npm run build

### 全新的 main.js 文件 ###

import { createApp } from 'vue'
    import App from './App.vue'
    import './index.css'
    
    createApp(App).mount('#app')

一个过去在 Vue2 中，我们见过的方法，createApp，采用 querySelector 的方法将 App.vue 中的 id=app 标签内容进行挂载。

顺带一提，App.vue 长这样。

<template>
      <img alt="Vue logo" src="./assets/logo.png" />
      <HelloWorld msg="Hello Vue 3.0 + Vite" />
    </template>
    
    <script>
    import HelloWorld from './components/HelloWorld.vue'
    
    export default {
      name: 'App',
      components: {
        HelloWorld
      }
    }
    </script>

内容构造基本和 Vue2 没差。

另外 Vue3 也是基本兼容 Vue2 的，过去的语法这里依旧可以正常使用。

[Link 1]: https://github.com/vitejs/vite/tree/main/packages/create-app

发表评论取消回复

表情：

评论列表（有 0 条评论，163人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue CLI脚手架创建Vue3项目

1、打开命令窗口切换到项目保存目录 ![在这里插入图片描述][946b8640907049e2b5f376325d23b9ac.png] 2、选择Vue 3创建 !

痛定思痛。/ 2024年04月06日 10:39/ 0 赞/ 42 阅读

相关 Vue-cli 3.0创建Vue 项目

目标：以搭建一个项目名称为`vue-test`的Vue前端项目为例 1、在windows7 cmd 终端输入创建vue-test 指令： vue create vu

朱雀/ 2023年10月18日 20:39/ 0 赞/ 559 阅读

相关使用 @vue/cli 创建 Vue 3 项目

1. 全局安装 @vue/cli： npm install -g @vue/cli 2. 创建项目： vue creat

比眉伴天荒/ 2022年12月09日 02:19/ 0 赞/ 168 阅读

相关 Vue3.0学习 - 第二节，Vue3 项目创建

创建 Vue3 的三种方式 Vue-Cli Webpack Vite 我用 Vite （尤自创的方案），另外两种方法请自己搜索。 Vite 的实现

青旅半醒/ 2022年11月18日 01:47/ 0 赞/ 164 阅读

相关 vite 创建 vue3项目

npm i -g create-vite-app npm init @vitejs/app my-vue-app cd my-vue

港控/mmm°/ 2022年11月07日 00:57/ 0 赞/ 161 阅读

相关 Vue3.0学习 - 第二十节，vue3中自定义组件使用 v-model

自定义事件也可以用于创建支持 `v-model` 的自定义输入组件 <input v-model="searchText" /> 等价于：

ゞ浴缸里的玫瑰/ 2022年10月10日 09:46/ 0 赞/ 149 阅读

相关创建 vue3 项目

创建 vue3 项目，需要安装 @vue/cli，如果电脑里已安装了 vue-cli，可以选择卸载 vue-cli 或者同时保留 vue-cli 和 @vue/cli。如

男娘i/ 2022年10月06日 00:51/ 0 赞/ 174 阅读

相关 Vue - vite 安装与创建 vue3 项目（使用 vite 创建 vue 项目）

前言 > 为什么使用 `vite`（官方解释）：[https://vitejs.cn/guide/why.html][https_vitejs.cn_guide_why.

阳光穿透心脏的1/2处/ 2022年09月07日 14:51/ 0 赞/ 346 阅读

相关【vue】vue创建3.x项目

vue创建3.x项目转载自：[https://blog.csdn.net/weixin\_49257048/article/details/107436525][htt

淡淡的烟草味﹌/ 2022年09月03日 13:12/ 0 赞/ 74 阅读

相关 vue 3.0 创建项目

1.安装node 我的node 版本 10.15.3 和 12.18.0 安装都成功了，用这个node版本安装出来的vue 版本对应是 4.4.6 和4.5.3，目前

客官°小女子只卖身不卖艺/ 2021年09月01日 07:09/ 0 赞/ 363 阅读