博客

1.vue3环境搭建

1>对于 Vue 3，你应该使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli。要升级，你应该需要全局重新安装最新版本的 @vue/cli：

# 全局安装 vue-cli
yarn global add @vue/cli
# 或
cnpm install -g @vue/cli

2>安装完后查看版本:

$ vue --version
@vue/cli 4.5.11

3>然后在 Vue 项目中运行：

vue upgrade --next

4>

注意：

vue-cli 3.x 和 vue-cli 2.x 使用了相同的 vue 命令，如果你之前已经安装了 vue-cli 2.x，它会被替换为 Vue-cli 3.x。

安装 @vue/cli-int：

cnpm i -g @vue/cli-init

2.vue3环境搭建好以后配置

1> vue create 项目名字(或者vue init webpack 项目名字)

2>选择Default (Vue 3) ([Vue 3] babel, eslint)，也可以选择第三个自定义创建

下载好以后

3>路由下载npm install vue-router@4

在src目录下新建router文件夹，在文件夹内新建index.js文件和routes.js文件

routes.js

import HelloWorld from "@/components/HelloWorld";

var routes = [
    {
        path:"/",
        name:"HelloWorld",
        component:HelloWorld
    }
]

export default routes

index.js

import { createRouter,createWebHistory } from "vue-router";
import routes from "@/router/routes";

const router = new createRouter({
    history:createWebHistory(),
    routes
})

export {
    router
}

4>全局配置main.js

下载：

npm install axios --save

npm i vant@next -S

npm install element-plus --save

main.js

import { createApp } from 'vue'
import App from './App.vue'
import {router} from "@/router";
import Vant from "vant"
import 'vant/lib/index.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'


const app = createApp(App)
app.use(router)
app.use(Vant)
app.use(ElementPlus)

app.mount('#app')

5>App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>