前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用vite+vue3搭建项目

使用vite+vue3搭建项目

作者头像
lilugirl
发布2020-12-08 10:26:38
1K0
发布2020-12-08 10:26:38
举报
文章被收录于专栏:前端导学
代码语言:javascript
复制
npm i create-vite-app -g
代码语言:javascript
复制
create-vite-app vue3demo
代码语言:javascript
复制
cd vue3demo
npm i 
npm run dev

查看vue-router最新版本

代码语言:javascript
复制
npm info vue-router versions

安装最新的版本 4.0.0-rc.6

代码语言:javascript
复制
npm i vue-router@4.0.0-rc.6

创建views文件夹,在该文件夹下创建两个vue文件 Home.vue 和About.vue 用来测试路由功能是否ok

在src目录创建router 文件夹,在该文件夹创建index.js文件,内容如下

代码语言:javascript
复制
// src/router/index.js
import {createWebHashHistory,createRouter} from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
const history=createWebHashHistory();
const router=createRouter({
  history,
  routes:[
    {
      path:'/',component:Home
    },{
      path:'/about',component:About
    }
  ]
});

export default router;

在main.js文件中引入router

代码语言:javascript
复制
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './index.css'

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

在App.vue文件中加上 <router-view>标签

代码语言:javascript
复制
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
  <router-view></router-view>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

检验路由链接是否工作 ,输入 http://localhost:3000/#/about

查看vuex最新版本

代码语言:javascript
复制
npm info vuex versions

安装最新版本 4.0.0-rc.2

代码语言:javascript
复制
npm i vuex@4.0.0-rc.2 -S

在src目录下创建store文件夹 ,在该文件夹下创建index.js文件

代码语言:javascript
复制
import Vuex from 'vuex'

export default new Vuex.createStore({
  state:{
    name:'liuyi'
  },
  mutations:{

  },
  actions:{

  },
  modules:{

  },
  getters:{

  }
})

在main.js中引入store

代码语言:javascript
复制
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './index.css'

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

在App.vue文件上检测store是否工作正常

代码语言:javascript
复制
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />

  name: {{$store.state.name}}

   <router-view></router-view>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

安装sass

代码语言:javascript
复制
npm i sass -D

安装完了之后 不需要额外配置,可以直接使用

源码地址 https://github.com/lilugirl/vite-vue3-boilerplate/tree/master

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档