Vue3使用Vite构建工具构建Vue3项目

vite官网：Vite中文网

• 什么是vite？—— 新一代前端构建工具。

• 优势如下：

  • 开发环境中，无需打包操作，可快速的冷启动。

  • 轻量快速的热重载（HMR）。

  • 真正的按需编译，不再等待整个应用编译完成。

• 传统构建 与 vite构建对比图

一、利用cmd和vscode创建

注意：使用npm前提是要先安装配置node

1. 查看npm版本

        npm -v

2.进入工作目录，根据npm的版本执行指令

        # npm 6.x
        npm init vite@latest <project-name> --template vue
        # npm 7 ，需要加上额外的双短横线
        mpm init vite@latest <project-name> -- --template vue

2.进入项目目录，安装依赖

        cd <project-name>

        npm install

3.启动项目

        npm run dev

 以本地网络为例：复制本地网络地址于浏览器，打开vue3项目的启动界面。

4.项目目录

node_modules目录：项目依赖

public目录：静态资源文件夹
src目录：源码文件夹

        assets目录：静态资源、测试数据
        components目录：存放Vue组件(组件扩展名是.vue)

        App.vue组件：主组件(启动组件)，也可以是自己创建的组件成为启动组件

        index.css文件：首页的css样式
        main.js文件：核心文件。使用App.vue创建Vue组件,将该组件挂载到index.html的div上

index.html文件：是vue项目启动的首页   

在此项目中创建新组件：

二、利用webstorm创建 

1.在webstorm中下载vite插件

 

 2.重启webstorm后，创建Vite项目，选择vue

3.安装项目依赖并运行

方法一：

• 点击右下角Run"npm install"，安装项目依赖

• 运行项目

方法二：

• 配置npm运行环境

•  运行项目

4.在此项目中创建新组件：

 Demo.vue代码段:

1.  
   <template>
2.  
   <div id="d1">{{ info }}</div>
3.  
   <div>{{ count }}</div>
4.  
   <button type="button" @click="add">Add</button>
5.  
   </template>
6.  
    
7.  
   <script>
8.  
   export default {
9.  
   name: "Demo",
10.  
    data(){
11.  
    return {
12.  
    info:'早睡早起长头发',
13.  
    count:0
14.  
    }
15.  
    },
16.  
    methods:{
17.  
    add(){
18.  
    this.count
19.  
    }
20.  
    }
21.  
    }
22.  
    </script>
23.  
     
24.  
    <style scoped>
25.  
    #d1{
26.  
    color:red;
27.  
    font-size:25px;
28.  
    }
29.  
    </style>

App.vue:

import Demo from './components/Demo.vue'

效果图：

注意：使用Vite构建工具构建Vue3项目，将自己创建的组件放在App.vue组件/HelloWorld.vue组件中，不需要注册（使用Vue脚手架构建Vue3项目需要），只需要导入。

导入方法举例：

import Demo from './components/Demo.vue'

这篇好文章是转载于：学新通技术网