第1个回答 2022-07-25
还没用几天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+"/"
}
}