Vue3开发极简入门（1）：初始化

大家好，欢迎来到IT知识分享网。

新开一个坑，本系列文章只讲个人对Vue3、TypeScript（Vue支持JS，也支持TS，本系列文章只用TS）的学习记录，开发工具是VSCode。

之前微信小程序的系列文章我个人是有点挖坑没埋好的感觉。一开始我是想在最后写个哪怕很简单的Demo，把前面文章的一些知识点融合一下，好歹是盘菜。但是微信对个人开发者的限制越来越多，很多API也收费。弄到最后我实在没心情了。

现在新开了Vue3的系列学习文章，努力！

项目新建&启动

首先要安装NodeJS（其实是为了npm）、Vite，本文不再赘述，注意科学上网。

创建一个项目：

npm create vue@latest

安装VSCode中Vue的官方插件：Vue – Official

启动：

npm run dev

退出：

q+回车

项目目录：

程序的入口就是：index.html–>main.ts–>App.vue

• components。组件目录。按照现有的约定和最佳实践，components目录应该放一些可复用的组件（按钮、输入框等）、小型组件（只有单一的功能）、UI组件（导航栏、侧边栏、页脚等）。页面级的组件——也就是我们通常写的业务页面（列表、表单），路由组件，大型组件都放在views或pages目录下面。这个后面讲路由之后再说，前期一些学习用的组件页面，就先放在components了。
• assets。资源目录，css、图片等。

关键代码

index.html：

 
  
 <script type="module" src="/src/main.ts"></script>

这个不用解释。

main.ts：

// 导入样式 import './assets/main.css' // 导入创建应用实例的函数 import { createApp } from 'vue' // 导入一个根组件 import App from './App.vue' // 创建一个根组件是App的应用实例，并挂载到名为app的容器里（一个DOM或CSS选择器字符串） createApp(App).mount('#app')

相关解释看注释。

vue文件可以写三种标签：

 
   <script lang="ts"> // TS代码 </script> 

修改App.vue：

 
   <script lang="ts"> // 将本组件导出，名为App export default{ name:"App" } </script> 

简单提一下Vue2的写法（后续文章只采用Vue3的写法）：

在components目录下创建Car.vue

 
   <script lang="ts"> export default{ name:'Car',//导出本组件，名为Car data() {//数据 return{ vehicleNo:'车A12345', vin:'vin', driverName:'张师傅', phoneNum:'' } }, methods:{//方法 showPhoneNum(){ alert(this.phoneNum) } } } </script> 

修改App.vue

 
   <script lang="ts"> import Car from './components/Car.vue'; // 将本组件导出，名为App export default{ name:"App", components:{Car}//导入Car组件 } </script> 

就加了3行代码，含义不言自明。

Vue3的写法。

先加一个插件：

npm i vite-plugin-vue-setup-extend -D

修改vite.config.ts：

import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import vueDevTools from 'vite-plugin-vue-devtools' // 添加1 import VueSetupExtend from 'vite-plugin-vue-setup-extend' // https://vite.dev/config/ export default defineConfig({ plugins: [ vue(), vueDevTools(), //添加2 VueSetupExtend() ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) }, }, })

参看前文的代码，我们新写一个组件，都要导出：

<script lang="ts"> export default{ name:'Car',//导出本组件，名为Car } </script>

每次都这么写，比较麻烦。

当然也可以直接删除这段代码，这样组件会直接使用文件的名称。这样看起来是不错，例如本例中，components目录下的Car.vue，没有这段代码，组件名自动就是Car。

但是在实际开发中，有这么一种目录文件结构，如
components/Driver/index.vue，这种结构，有N个Driver同级目录，组件名称都是index，就很烦了。

因此有个既能自定义组件名，又能节省代码的方法就很有必要了，此插件就是干这个的，详情见后。