目录
安装vue3最新版本的vue-cli
卸载旧版
vue-cli2 卸载 npm uninstall -g vue-cli
vue-cli3 卸载 npm uninstall -g @vue/cli安装新版本 @vue/cli
vue-cli3 安装最新版 npm install -g @vue/cli
vue-cli3 安装指定版 npm install -g @vue/[email protected]
//检查vue版本号
vue -V搭建vue3最新脚手架
web方式搭建
与旧版本步骤一致 可在安装时，选择配置项
npm create myappvite方式搭建
初始化一个项目
npm init vite-app myapp
或
yarn create vite-app myapp安装依赖
yarn install
或
yarn
或
npm i启动项目
yarn dev
或
npm run dev这个项目只是一个基本的结构，是没有其他的配置的，必须自己添加配置
vite配置项目
配置TS
1 安装
yarn add typescript -D
2 初始化
//执行命令 初始化 tsconfig.json
npx tsc --init
3 将main.js修改为main.ts <script> 修改为 <script lang="ts">
4 配置 ts 识别vue文件,在项目根目录添加shim.d.ts文件
declare module "*.vue" {
import { Component } from "vue";
const component: Component;
export default component;
}
配置vue-router
1 安装
yarn add [email protected]
// or
yarn add vue-router@next
2 配置vue-router
在项目src目录下面新建router目录，然后添加index.ts文件，添加以下内容
import {createRouter, createWebHashHistory} from 'vue-router'
const routes:any = [
{
path: '/',
name: 'Home',
component: () => import('../views/Home.vue')
}
]
// Vue-router新版本中，需要使用createRouter来创建路由
export default createRouter({
// 指定路由的模式,此处使用的是hash模式
history: 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
// 确保 t_use_ 实例来创建router, 将路由插件安装到 app 中
createApp(App).use(router).mount('#app')
配置vuex
1 安装
yarn add vuex@4
//或者
yarn add vuex@next2 在项目src目录下面新建store目录，并添加index.ts文件，添加以下内容
import { createStore } from 'vuex'
interface State {
userName: string
}
export default createStore({
state(): State {
return {
userName: "vuex",
};
},
mutations:{ },
actions: { },
modules: { },
plugins: [ ]
});