1、使用vite
创建脚手架
npm create vite@latest
执行完成后就会生成下面这么一个项目
2、将src
目录下的所有文件都删除,换上自己的案例
(1)在src
目录下创建main.ts
文件
// 引入 createApp 用于创建应用
import { createApp } from "vue";
// 引入 App 根组件
import App from './App.vue'
// 创建一个应用
const app = createApp(App)
// 挂载整个应用到 app 容器中
// .mount() 方法应该始终在整个应用配置和资源注册完成后被调用。同时请注意,不同于其他资源注册方法,它的返回值是根组件实例而非应用实例。
app.mount('#app')
(2)在src
目录下创建App.vue
文件(可通过npm i vite-plugin-vue-setup-extend -D
命令安装插件实现script
标签上配置组件名称)
<template>
<div id="app">
<h2>hello, world!</h2>
</div>
</template>
<!-- npm i vite-plugin-vue-setup-extend -D -->
<!-- 然后就可以直接在 script 标签中写组件名称 -->
<script setup lang="ts" name="App">
</script>
<style lang="scss" scoped>
div {
width: 100%;
height: 500px;
background-color: pink;
}
</style>
3、启动项目
# 第一步安装依赖
npm install
# 第二步启动
npm run dev
4、查看效果
5、扩展补充
后端的朋友在安装依赖的时候可能会遇到一些node
版本的问题,因为可能电脑上用的跟公司一样的版本,而公司版本又偏低,所以很大可能让一些想学前端的人入门即放弃。
因此在这里给大家推荐nvm这个工具,用来管理node
版本的。安装了nvm
之后,就可以同时安装多个node
,并且可以随意切换,肥肠好用!效果如下图。
还有一个叫nrm
的,就是npm
源管理器,允许你快速地在npm
源间切换。可通过npm install -g nrm
命令安装,也肥肠好用!效果如下图。