使用Vue3 + vite + TypeScript项目创建步骤

项目搭建

vite

 //yarn的下载vite方式

yarn create vite-app <projectName>

//or

//npm的下载vite方式

npm init vite-app <projectName> 



//以上方式自行选择即可

vue-cli

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

 yarn global remove vue-cli

//or

npm uninstall vue-cli -g

安装新版的 

@vue/cli

 yarn global add @vue/cli

//or

npm install -g @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 的特点。

选择 手动选择功能 

Manually select features

备注： 想要预装什么，就手动check什么（即使前期忘记勾选，后期也可以加装）。

 ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)

( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 

( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用

( ) Progressive Web App (PWA) Support// 渐进式Web应用程序

( ) Router // vue-router（vue路由）

( ) Vuex // vuex（vue的状态管理模式）

( ) CSS Pre-processors // CSS 预处理器（如：less、sass）

( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）

( ) Unit Testing // 单元测试（unit tests）

( ) E2E Testing // e2e（end to end） 测试

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

 vue add typescript

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

 <script lang="ts">

vite搭建项目（重点讲）

  1. 创建
 yarn create vite-app <projectName>

//or

npm init vite-app <projectName> 



//进入

cd projectName

//安装依赖

yarn install 

//启动

yarn dev

访问：http://localhost:3000


上图可以看到新建的项目结构与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,也需要将其他页面的 

&lt;script&gt;
修改为 
&lt;script lang="ts"&gt;

4、配置 ts 识别vue文件,在项目根目录添加shim.d.ts文件
添加以下内容

 declare module "*.vue" {

import { Component } from "vue";

const component: Component;

export default component;

}
配置Vue Router

Vue Router 4.0 ，变化请查看 Github 中完整的细节，
目前版本beta: v4.0.12, yarn 进行安装需要带上版本号
1、安装vuex 

 yarn add vue-router@4.0.12

// or

yarn add vue-router@next

2、安装完后配置vue-router
在项目src目录下面新建router目录，然后添加index.ts文件，添加以下内容

 // import VueRouter from 'vue-router'

import {createRouter, createWebHashHistory} from 'vue-router'

const routes:any = []

// Vue-router新版本中，需要使用createRouter来创建路由

export default  createRouter({

// 指定路由的模式,此处使用的是hash模式

history: createWebHashHistory(),

routes // short for `routes: routes`

})



// const routes :any = []

// // 3. Create the router instance and pass the `routes` option

// // You can pass in additional options here, but let's

// // keep it simple for now.

// const router = VueRouter.createRouter({

//   // 4. Provide the history implementation to use. We are using the hash history for simplicity here.

//   history: VueRouter.createWebHashHistory(),

//   routes, // short for `routes: routes`

// })

3、将router引入到main.ts中,修改main.ts文件 

 import { createApp } from 'vue'

import App from './App.vue'

import './index.css'

import router from './router/index'



// import router 后创建并挂载根实例。

const app = createApp(App)

// 确保 t_use_  实例来创建router, 将路由插件安装到 app 中

app.use(router)

app.mount('#app')

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

配置Vuex

Vuex 4.0 ，变化请查看Github
目前版本beta: v4.0.2
1、安装vuex 

 yarn add vuex@4

//或者

yarn add vuex@next

2、安装完后配置vuex
在项目src目录下面新建store目录，并添加index.ts文件，添加以下内容

 import { createStore } from 'vuex'



interface State {

    userName: string

}

export default createStore({

    state(): State {

        return {

            userName: "vuex",

        };

    },

});

配置Ant Design Vue

具体使用方式请参考：官方文档
1、引入 

ant-design-vue

 yarn add ant-design-vue@next

2、在main.ts中引入 

 import { createApp } from 'vue'

import App from './App.vue'

import './index.css'

import AntDesignVue from 'ant-design-vue';

import 'ant-design-vue/dist/antd.css';

import router from './router/index'

import store from './store/index'



// import router 后创建并挂载根实例。

const app = createApp(App)

// 确保 t_use_  实例来创建router

// 整个应用程序路由器感知。

app.use(router)

app.use(store)

app.use(AntDesignVue)

app.mount('#app')

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

标签: Javascript

添加新评论