Vue 3.0 初试-项目创建

  1. 首先需要安装vue-cli 或者将vue-cli升级到4.3.1

  2. 命令行 在Windows下输入npm install -g @vue/cli
    注意如果你的电脑是Mac 那么需要输入的命令行为 sudo npm install -g @vue/cli,否则会提示没有权限, 接下来会让你输入电脑密码,输入成功后开始安装

  3. 安装成功后可以看到此时的vue-cli脚手架的版本已经是4.3.1
    在这里插入图片描述

  4. 接下来 输入 vue create vue-next-test来创建Vue 项目
    在这里插入图片描述

此时会有两个选项,我们选择第二个自定义项目,回车可以看到有很多选项需要选择,通过上下箭头和空格选中需要的,一般来说选中下面这些就可以了
在这里插入图片描述

  1. 选择回车后可以看到还需要我们配置一些内容,首先会询问是否选择 router的history模式(router有两种模式:history,hash,默认是hash模式),选择Y,

  2. 因为我们在开始的时候选择了CSS Pre-processors,即css预处理器,所以这里还会让我们选择一种css预处理方式,这里习惯哪种就可以选择哪种,我这里选择了Less
    在这里插入图片描述

  3. 接下来会选择ESLint配置,这里选择标准配置
    在这里插入图片描述

  4. 接下来选择lint提示方式,这里选择保存时,
    在这里插入图片描述

  5. 然后选择配置文件保存在哪里,当然是在package.json文件里
    在这里插入图片描述

  6. 最后会询问你是否将这次的配置设置为之后项目的预设模式,这里按照个人喜好吧,就可以等待项目创建完成了
    在这里插入图片描述
    在这里插入图片描述

  7. 通过cd vue-next-test进入项目,因为现在我们要用的是Vue 3.0-beta所以还需要通过vue add vue-next安装对于vuexvue-router的依赖
    在这里插入图片描述

  8. 打开项目里的router文件夹下的index.js文件,发现vue 3.0
    的路由是通过引入的createRouter来创建Vue Router实例,配置方法基本与2.0相似

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

在main.js里面直接引入了路由

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(router).use(store).mount('#app')

13.Vue3.0在写法上会与react有点类似,后续将继续更新3.0的写法

Logo

前往低代码交流专区

更多推荐