Vue后台管理系统练习-0前置准备+项目大致框架确立

本项目整体参照 BV1QU4y1E7qo 以及一些官方文档
细节部分会有些许修改

使用了vue2，全家桶内容
以下内容为vue项目建立（使用的脚手架为VueCLI v5.0.4）以及一些初步准备
只涉及路由，暂时不涉及axios的使用（到后面会写）

创建项目

vue create 项目名称

会在当前文件夹下创建以项目名称为名字的项目文件夹，后续操作大都在此文件夹中的src中进行

与git仓库建立远程连接
在github新建仓库后可以建立连接，有时候失败可能是网络连接原因

git remote add origin 仓库地址
git push --set-upstream origin main

ElementUI
全局引入：
只是做项目练习可以使用全局引用，打包时会把element-ui中的所有样式都包起来，占内存相对大一点
（也没有大很多其实）

npm i element-ui -S

在main.js中引用

// 需要先引用vue
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

按需引入：
只引用需要的模块，打包时会减少体积

npm install babel-plugin-component -D

将babel.config.js修改为：

module.exports = {
	presets: [
		'@vue/cli-plugin-babel/preset'
		 // presents不做改变
	],
	plugins: [
		[
			"component",
			{
				"libraryName": "element-ui",
				"styleLibraryName": "theme-chalk"
			}
		]
	]
}

tips: 我使用的vscode，如果想要修改缩紧为两格，可以在左下角齿轮处修改setting中的tab-size为2
alt（option）+ shift + F 自动调整格式

在main.js中引用：

import { Button, Select } from 'element-ui';

Vue.component(Button.name, Button);
// 或者Vue.use(Button)

完整组件列表以element-ui包中的components.json 为准（在node_modules内）

vue-router

npm i vue-router@3.2.0

不添加@后版本号会产生错误，vue2不要用太高版本的router据说会报错

在src中新建router文件夹，新建index.js，内容大致如下

import Vue from 'vue'
import VueRouter from 'vue-router'

import Home from '@/views/home/Home'
// 注册组件
Vue.use(VueRouter)

const routes = [
	{
		path: '/',  // 浏览器内url后的路径
		name: 'Home', // 名字
		component: Home, // 跳转页面
		// 按需引入： () => import('@/views/home/home')
	}
]
const router = new VueRouter({
	mode:'hash',  // 由于上次history模式导致出错因此采用hash模式
	routes
})
export default router

新建一个views文件夹储存各个界面

Home内的代码示例：

<template>
	<div>Home</div>  // 页面内容
</template>

<script>
	export default {
		name:'home-view'
		 // 此处名字不可使用短词，不然会报错
	}
</script>

然后在main.js中引入

import router from '@/router'
// vue中@默认为路径src/ 可能有版本差异，但是我用3和2都是有的

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
// 在newVue中加入router
// 顺便，vue3中在中间加上.use(router)就可以用

App.js中需要插入<router-view></router-view>才能使内容显示出来，记得插入在div内不然会报错

项目初步建立基本为以上内容，后续可以再添加views页面与component组件，network的axios部分会在之后写到了再进行总结