Vue3+TypeScript + vite 创建项目步骤

项目搭建

vite

npm init vite-app <projectName> 
//或者
yarn create vite-app <projectName>

vue-cli

如果已经全局安装过旧版本的vue-cli,先卸载。

npm uninstall vue-cli -g   //yarn global remove vue-cli

安装新版@vue/cli

npm install -g @vue/cli  //或者 yarn global add @vue/cli
//检查vue版本号
vue -V
//创建项目
vue create <projectName>

备注:

vite 是一个由原生ESM驱动的Web开发构建工具,打开 vite 依赖的 package.json 可以发现在 devDependencies 开发依赖里面已经引入了TypeScript ,甚至还有 vuex , vue-router , less , sass 这些本地开发经常需要用到的工具。vite 轻量,开箱即用的特点,满足了大部分开发场景的需求,作为快速启动本地 Vue项目来说,这是一个非常完美的工具

vue-cli搭建项目

vue3 的更新怎么能少得了 vue-cli 呢, vue-cli 更强调的是用 cli 的方式进行交互式的配置,选择起来更加灵活可控。丰富的官方插件适配,GUI的创建管理界面,标准化开发流程,这些都是 vue-cli 的特点。

Vue3+TypeScript + vite 创建项目步骤_第1张图片
Vue3+TypeScript + vite 创建项目步骤_第2张图片
备注: 想要预装什么,就手动check什么(即使前期忘记勾选,后期也可以加装)。

 1 ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 2 ( ) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。 
 3 ( ) TypeScript// TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行,目前较少人再用
 4 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
 5 ( ) Router // vue-router(vue路由)
 6 ( ) Vuex // vuex(vue的状态管理模式)
 7 ( ) CSS Pre-processors // CSS 预处理器(如:less、sass)
 8 ( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint)
 9 ( ) Unit Testing // 单元测试(unit tests)
10 ( ) E2E Testing // e2e(end to end) 测试

例如: 忘记使用选择 TypeScript 也没事,加一行cli命令就行了

vue add typescript

最后,别忘了在 .vue 代码中,给 script 标签加上 lang=“ts”

<script lang="ts">

vite搭建项目(重点讲)

  1. 创建
npm init vite-app <projectName> 
//或者
yarn create vite-app <projectName>
//进入
cd projectName
//安装依赖
 yarn install 
//启动
yarn dev 

访问:http://localhost:3000
Vue3+TypeScript + vite 创建项目步骤_第3张图片
Vue3+TypeScript + vite 创建项目步骤_第4张图片

上图可以看到新建的项目结构与vue-cli4创建的项目结构基本一样,都是App.vue和main.js

查看main.js文件内容

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

发现创建Vue的方式变了,原来是new Vue来初始化Vue,但在Vue3.0中,修改为了通过createApp的方式;
Vue3中文文档

配置项目

配置typescript

1、安装typescript

yarn add typescript -D

2、初始化 tsconfig.json

//执行命令 初始化 tsconfig.json 
npx tsc --init     

3、将main.js修改为main.ts

其他的引用也修改为main.ts,也需要将其他页面的

你可能感兴趣的:(vue3,typescript,vue.js,javascript)