构建实用VUE3项目

Posted 2023-03-23

参考技术A 还没用几天VUE，就到3了，本文旨在记录构建一个实用项目模板昂。

1、自然是将VUE-CLI升级到最新版本啦（卸载旧的，安装zhui新的）

npm uninstall -g vue-cli

npm install -g @vue/cli

你要是想看看脚手架的版本，那敲这个

vue --version

2、构建你的项目吧

vue create myproject

进入配置的时候问你愿不愿意，你打YES就好

还有就是，既然想要VUE3的，记得选VUE3就好

到了这儿，一个原始的项目就有啦。

3、在项目目录中，建一个名叫vue.config.js的文件，并且在这个文件里导出一个对象。至于这个对象里的选项和配的值，那就又可以写一篇了

4、配置路由（和子路由）

1）安装好路由插件     cnpm i vue-router@next -D

2）在src目录下创建 router/index.js 

3）在根目录的main.js里面引入路由  import router from './router'

4)   在Vue对象中加入router的配置

import Vue from 'vue'

import VueRouter from 'vue-router'

import Login from '../views/Login.vue'

Vue.use(VueRouter)

  const routes = [

 

    path: '/',

    redirect: '/login'

  ,

 

    path: '/login',

    name: 'Login',

    component: Login

  ,

 

    path: '/',

    component: resolve => require(['../views/Index.vue'], resolve),

    redirect: '/home',

    children: [

     

        path: 'home',

        name: 'home',

        component: resolve => require(['../views/home/Home.vue'], resolve),

        meta: title: '首页'

      ,

     

        path: '/programCard',

        name: 'programCard',

        component: resolve => require(['../views/programCard/card.vue'], resolve),

        meta: title: '路由1'

     

    ]

 

]

const router = new VueRouter(

  mode: 'hash',

  base: process.env.BASE_URL,

  routes

)

export default router

5、安装VUEX并使用

1)安装vuex  cnpm i  vuex@next -D

2）在src目录下创建 store/index.js 

3）在根目录的main.js里面引入  import store from './store'

4)   在main.js里加入store的配置

6、配置axios

1)   安装vuex  cnpm i  axios@next -D

2)   在src目录建立api/request.js,并在其中引入axios       import axios  from 'axios'

在request.js中创建axios实例

添加请求拦截器和响应拦截器

再将实例导出export

3)在src目录建立api/index.js,引用axios实例，并统一定义请求函数

7、在src下建立views目录和路由子目录home/Home.vue

8、在assets目录增加css 、iconfont、images、js目录，存放资源

9、根目录下建立static\global.js

定义常量 const API_ROOT='127.0.0.1:8081'

建立对象window.global=

url:

apiUrl:"http://"+API_ROOT+"/"

基于webpack的构建方案引入vue后的相关配置

之前有一套 h5 的前端构建方案，能够支持同时管理构建多个相对独立的 h5。在面对大量的，相对独立的活动营销型 h5 时，这个解决方案非常实用 h5-webp。

因为项目相对来说简单，所以一直采用命令式渲染方式，这显然是不太合理的。一旦遇到复杂的项目，会有大量状态管理，路由管理，频繁的 dom 操作等，这时候我们需要引入一套申明式渲染方案。

因为是对已有构建方案的升级，所以首选渐进式框架 vue。
渐进式框架的理解很喜欢的一段话 传送门

安装依赖

在实践过程中，首先尝试了 vue2 稳定版，但是考虑到 vue3 的升级变化比较大，最后还是决定采用 vue3 。

vue2 的依赖安装：

npm install vue -S
npm install vue-loader -D
npm install vue-template-compiler -D
npm install vue-router -S

如果你想用最新的 vue3 ：

npm install vue@next -S
npm vue-loader@16.0.0-beta.4 -D 当前需要自行指定版本
npm @vue/compiler-sfc -D
npm install vue-router@next -S

每个 vue 包的新版本发布时，一个相应版本的 vue-template-compiler 也会随之发布。编译器的版本必须和基本的 vue 包保持同步，这样 vue-loader 就会生成兼容运行时的代码。这意味着你每次升级项目中的 vue 包时，也应该匹配升级 vue-template-compiler。

webpack配置vue组件加载器

// 如果你选择的是vue2
// const VueLoaderPlugin = require(\'vue-loader/lib/plugin’);
// 如果你选择最新的vue3
const { VueLoaderPlugin } = require(\'vue-loader’); 

let config = {
    module: {
        rules: [
            { 
                test: /\\.vue$/,
                loader: \'vue-loader\'
            }, 
            …
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        ...
    ]
};

vue3路由的配置

import Vue from "vue";
import { createRouter, createWebHashHistory, createWebHistory } from \'vue-router\'

const routes = [
    {
        path: "/",
        redirect: "/index"
    },
    ...
];

const router = createRouter({
    // mode: \'history\', // vue2 路由模式的配置方式
    // history: createWebHistory(), // history模式
    history: createWebHashHistory(), // hash模式
    routes
});

export default router;

这里需要注意一下，这里 vue3 关于 hash / history 两种路由配置方式与 vue2 是不同的。