当前位置：首页 > news >正文

【前端】创建一个vue3+JavaScript项目流程

news 来源：原创 2025/6/8 8:24:49

1、检查node和npm是否安装，查看版本：

node -v
npm -v

2、安装脚手架cli或vite

（1）cli

安装：npm install -g @vue/cli

检查是否安装成功：vue -v

使用cli创建项目：vue create my-project(项目名)---→然后可以选择vue3/2--→等待创建

切至项目：cd my-project

运行：npm run serve

（2）vite

方法一：

        安装：npm install -g create-vite-app、

        创建：create-vite-app my-project --template vue

        切至项目：cd my-project

        运行：npm run dev

方法二：

初始化项目：npm init vite@latest

创建vite项目：npm create vite@latest

输入项目名--→选择框架vue---→选择语言JavaScript

切至项目：cd my-project

        运行：npm run dev

3、目录主要结构：

Cli:

        my-project/
        ├── src/
        │ ├── main.js # 项目入文件
        │ ├── App.vue # 根组件
        │ └── component/ # 存放组件
        ├── package.json # 项目依赖和脚本配置
        └── README.md # 项目说明

vite:

        my-project/
        ├── src/
        │ ├── main.js # 项目入文件
        │ ├── App.vue # 根组件
        │ └── assets/ # 存放静态资源

├── public/ # 存放公共资源
        ├── package.json # 项目依赖和脚本配置
        └── README.md # 项目说明

        └── vite.config.js # Vite配置文件

4、App.vue开始写页面

5、添加路由

安装：npm install vue-router@4

在src/main.js引入并使用：

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

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

在src/router/index.js定义路由：

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home }
  ]
})
export default router

6、添加vuex状态管理

安装：npm install vuex@4

在src/store/index.js中创建：
import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})
在src/main.js引入并使用：
import store from './store'
app.use(store)