枫枫知道个人博客|使用vite搭建vue3项目

[[ slide_text ]]

[[ item.content ]]

使用vite搭建vue3项目

发布时间：2022-07-29 作者：枫枫来源：枫枫知道个人博客

Vue Vite

# 1 创建项目

```Python
npm init vite@latest

```

使用这个命令之前要确保你用node环境，已经npm可以正常使用

依次输入项目名称、选择vue、选择使用js或者ts

# 2 安装依赖

```Python
cd 项目名称
npm install
```

# 3 启动项目

```Python
npm run dev
```

# 4 引入vue-router

```Python
npm install vue-router@4 -S

```

**在src目录下新建**`router/index.js`** 并编写一下代码**

```Python
import { createRouter, createWebHistory} from 'vue-router'

const routes:  = [
    {
        path: '/',
        component: () => import('../components/HelloWorld.vue')
    }
]

const router = createRouter({
// createWebHashHistory hash 路由
// createWebHistory history 路由
// createMemoryHistory 带缓存 history 路由
    history: createWebHistory(),
    routes
})

export default router

```

修改main.js

```Vue
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

```

修改App.vue

```Vue
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup</script>

```

# 5 引入vuex

```Vue
npm install vuex@next --S

```

**src目录下新建**`store/index.js`**并编写一下代码**

```Vue
import { createStore } from 'vuex'
const store = createStore({
    state: {
        userInfo: {
            name:'myName'
        }
    },
    mutations: {
        getUserInfo (state, name) {
            state.userInfo.name = name
        }
    },
    actions: {
        asyncGetUserInfo (context) {
            setTimeout(() => {
                context.commit("getUserInfo", +new Date() + 'action')
            },2000)
        }
    },
    getters: {
        userInfoGetter (state) {
            return state.userInfo.name
        }
    }
})

export default store;

```

修改main.js

```Vue
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')

```

ok 大功告成 接下来就可以愉快的编写代码啦

上一篇：网站https部署下一篇：Vuex

你觉得文章怎么样

易昂杨

![emoji](https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/6e/2018new_guzhang_thumb.png)

9个月前
点赞（0）回复（0）

枫枫知道个人博客

使用vite搭建vue3项目

易昂杨