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

首先先下载全局框架

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就可以顺利运行了！！！