首先先下载全局框架

npm install -g @vue/cli
cnpm install -g @vue/cli

首先，先是网页端的，使用该代码开始搭建

vue create myapp_init

如果项目中存在同名，则会跳出三个选项，分别是

Overwrite覆盖当前项目，Merge合并当前项目，Cancel取消

如果不存在，则选择Manually select features选项中，选择Babel，Router，Vuex

然后是Choose a version of Vue.js that you want to start the project with，意思是选择要使用其启动项目的Vue.js版本，当然用vue2就用vue2，vue3就用vue3

然后是Use history mode for router? (Requires proper server setup for index fallback in production)，意思是对路由器使用历史记录模式吗？（生产中的索引回调需要设置正确的服务器），当然我们选n

接下来是Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)，意思是你更喜欢在哪里为Babel，ESLint等放置配置？（使用箭头键），当然我们选择第一项In dedicated config files

最后是Save this as a preset for future projects? (y/N)，当然选择n，因为意思是是否将其另存为未来项目的预设

到这里我们项目就搭建完成了，使用npm run serve就可以看到

然后是vuex，但是貌似很多都在用vuex写移动端

使用该代码进行搭建

cnpm init vite@latest

然后在vite.config.js文件下，写如下所述

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({server:{port:8080,open:true,proxy:{}},plugins: [vue()]
})

然后是搭建路由

cnpm i vue-router@4 --save

在src文件夹下，创建好配置路由的地址信息router/index.js文件，创建views/Home.vue
在index.js中实例化创建对象信息

import {createRouter,createWebHashHistory} from "vue-router";export default createRouter({history: createWebHashHistory(),routes:[{path:"/",name:"home",component:() => import("../views/Home.vue"),}]
})

main.js中导入路由的信息

const app = createApp(App);
import router from "./router/index";app.use(router).mount('#app')

然后插入

cnpm i vuex@next --save
cnpm i vuex-persist --save

src文件夹下，创建vuex的存储文件信息 store/index.js
store/index.js中配置信息

import { createStore } from "vuex";
import VuexPersist from "vuex-persist";
const vuexLocal = new VuexPersist({storage:window.localStorage,
})
export default createStore({state:{},mutations:{},getters:{},plugins:[vuexLocal.plugin],
})

main.js中需要导入插件信息

import router from "./router/index";
import store from "./store/index";app.use(router).use(store).mount('#app')

然后是axios

cnpm i axios --save

src文件夹下，创建utils=》request.js，根据自己的需求做不同的axios设置

import axios from "axios";
const Server = axios.create({baseURL: "",timeout: 5000,
})
Server.interceptors.request.use((config) => {return config;
}, (error) => {return Promise.reject(error);
})
Server.interceptors.response.use((response) => {return response.data;
}, (error) => {return Promise.reject(error);
});export default Server;

在main.js中引入

import axios from "./utils/request.js";
app.config.globalProperties.$axios = axios;

然后下载sass

cnpm i node-sass sass-loader sass -D

这样就搭建完成了

使用npm run dev就可以顺利运行了！！！

【原创纯手打】VUE徒手搭各类脚手架详解相关推荐

Linux运行脚手架vue,Linux Nodejs与vue脚手架详解
本篇教程介绍了Linux Nodejs与vue脚手架详解,希望阅读本篇文章以后大家有所收获,帮助大家对Node.js的理解更加深入. < https://nodejs.org/dist/v8.9 ...
keep alive PHP,vue中keep-alive使用方法详解
这次给大家带来vue中keep-alive使用方法详解,vue中keep-alive使用的注意事项有哪些,下面就是实战案例,一起来看一下. 1.keep-alive的作用以及好处在做电商有关的项目中 ...
php动态写入vue,Vue自定义动态组件使用详解
这次给大家带来Vue自定义动态组件使用详解,Vue自定义动态组件的注意事项有哪些,下面就是实战案例,一起来看一下. 现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这 ...
Vue的生命周期过程详解
Vue的生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的 ...
Vue 中的 ref 属性详解
Vue 中的 ref 属性详解我们先来读一下vue的官方文档我们来分析官方文档首先ref的引用是相当于一个DOM节点(如果是子组件则指向的是其实例),而且是一个string类型的值. 通俗的将就 ...
原创：Spark中GraphX图运算pregel详解
原创:Spark中GraphX图运算pregel详解由于本人文字表达能力不足,还是多多以代码形式表述,首先展示测试代码,然后解释: package com.txq.spark.test import ...
《前端》权限链接--vue前端权限控制方案详解附demo_feiyu_may的博客-CSDN博客_vue 前端权限
前端权限控制 - 潘正 - 博客园 https://www.cnblogs.com/guchengnan/p/11800947.html vue前端权限控制方案详解附demo_feiyu_may的博 ...
vue里页面的缓存详解
关于vue里页面的缓存详解实用的例子ABC 往下查看 keep-alive是vue内置的一个组件,可以使被它包含的组件处于保留状态,或避免被重新渲染. 用法: 在keep-alive标签内部添加 i ...
vue连接后端本地接口_详解vue配置后台接口方式
详解vue配置后台接口方式在vueAdmin项目中有两种方式配置后端接口的方式,在此做下记录第一种(代理方式) 在工程目录下 > config > index.js - 修改为如下配置 ...
从零开始，创建一个VUE项目，详细图文详解。
准备工作 1.安装VScode 点击下载 2.安装node 点击下载 3.安装npm 点击下载一.步骤详解 1.创建项目的文件夹.比如F盘下新建一个名为MyDemo的文件夹,打开VScode进入My ...

【原创纯手打】VUE徒手搭各类脚手架详解