npm init vite-app <projectName>
//或者
yarn create vite-app <projectName>
如果已经全局安装过旧版本的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项目来说,这是一个非常完美的工具
。
vue3 的更新怎么能少得了 vue-cli 呢, vue-cli 更强调的是用 cli 的方式进行交互式的配置,选择起来更加灵活可控。丰富的官方插件适配,GUI的创建管理界面,标准化开发流程,这些都是 vue-cli 的特点。
备注: 想要预装什么,就手动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">
npm init vite-app <projectName>
//或者
yarn create vite-app <projectName>
//进入
cd projectName
//安装依赖
yarn install
//启动
yarn dev
上图可以看到新建的项目结构与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中文文档
1、安装typescript
yarn add typescript -D
2、初始化 tsconfig.json
//执行命令 初始化 tsconfig.json
npx tsc --init
3、将main.js修改为main.ts
其他的引用也修改为main.ts,也需要将其他页面的 修改为
4、配置 ts 识别vue文件,在项目根目录添加shim.d.ts文件
添加以下内容
declare module "*.vue" {
import { Component } from "vue";
const component: Component;
export default component;
}
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 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",
};
},
});
具体使用方式请参考:官方文档
1、引入ant-design-vue
yarn add ant-design-vue@next
2、在main.ts中引入
iimport { 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')