vue 3.0 学习记录（1）安装

最新推荐文章于 2023-06-25 18:36:49 发布

文文小公举吖

最新推荐文章于 2023-06-25 18:36:49 发布

阅读量1.6k

点赞数 2

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_42256801/article/details/108742785

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客记录了作者学习Vue 3.0的过程，从卸载旧版Vue CLI开始，通过NPM安装Vue CLI v4.5，创建Vue 3.0项目，并按需安装了vue-router、vuex和sass等插件。在配置路由部分，提到了Vue Router的迁移和更新，以及在main.js中使用createApp的改变。

摘要由CSDN通过智能技术生成

尤大大的vue 3.0来了，那肯定抓紧学起来，照着官方文档学习，也会记录一下学习过程！

卸载老版本的vue cli：

npm uninstall vue-cli -g

NPM

在用 Vue 构建大型应用时推荐使用 NPM 安装[1] 。NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

# 最新稳定版
$ npm install vue@next：

安装vue cli v4.5：

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

yarn global add @vue/cli@next
# OR
npm install -g @vue/cli@next

安装成功：
在这里插入图片描述
查看vue版本：

创建vue3.0项目：

1、全局安装vite

npm install create-vite-app -g

在这里插入图片描述
2、创建项目

npx create-vite-app project-name    //自定义项目名称

在这里插入图片描述
3、cd project-name -> npm install -> npm run dev

到这个步骤项目创建成功：

按需安装项目必须的插件

1、 vue-router

npm install vue-router@next  -S

2、 vuex

npm install vuex@next -S

3、 sass

npm install sass -D

配置路由

这里创建要使用createRouter，“vue-router”: "^4.0.0-beta.11"版本，也有很多改动，详见官方文档，文档好难找啊~~~我找了好久，贴出来吧~
vue-router：从Vue 2迁移https://next.router.vuejs.org/guide/migration/#new-features
router.js

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/test',
    name: 'Test',
    component: () => import(/* webpackChunkName: "test" */ '../views/test.vue')
  }
]

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

export default router

main.js
这里不能写import Vue from 'vue’了，需要改成createApp

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

const app = createApp(App);
app.use(router)  

app.mount('#app')

app.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/test">Test</router-link>
    </div>
    <router-view/>
  </div>
</template>

参考广广-t的文章：https://www.cnblogs.com/365terry/