影视广告制作报价单_什么行业适合做网站推广_营销与销售的区别_怎么做推广和宣传

时间:2025/9/10 1:07:53来源：https://blog.csdn.net/sinat_39394862/article/details/146815487 浏览次数:0次

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)