本项目整体参照 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部分会在之后写到了再进行总结