Vue后台管理系统
npm 是node的包管理工具 yarn是为了弥补npm的缺陷而出现
yarn的速度快 并行安装 离线模式
安装版本的统一 .lock文件
更简洁的输出
更好的语义化
| npm | yarn |
|---|---|
| npm install | yarn |
| npm install react --save | yarn add react |
| npm uninstall react --save | yarn remove react |
| npm install react --save-dev | yarn add react --dev |
| npm update --save | yarn upgrade |
vue-cli搭建的详细过程
使用之前必须有node环境，确保电脑上安装了node.js
node -v可以查看安装node版本
npm -v可以查看npm是否存在了
可以选择安装cnpm和yarn
安装cnpm
http://npmmirror.com/
npm install -g cnpm --registry=https://registry.npmmirror.com安装cnpm
cnpm -v查看是否安装成功
有人说cnpm可能会引起一些奇怪的bug，稳妥起见还是把npm的源改成taobao镜像就好 这里我是安装好了yarn
可以使用cnpm install -g @vue/cli安装脚手架
vue -V可以查看脚手架是否安装成功 显示安装的版本
创建项目
使用 vue create projectname
element-ui在网页中使用
CDN
https://www.bootcdn.cn/
elementUI官网
vue官网
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
head>
<body>
<div id="app">
<el-button @click="visible = true" type="success">Buttonel-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Elementp>
el-dialog>
div>
body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/index.js">script>
<script>
new Vue({
el: '#app',
data: function() {
return {
visible: false }
}
})
script>
html>
element-ui结合脚手架使用之全部引入
npm i element-ui --save-dev
main.js中添加
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
页面中使用个组件即可
打包时内容过大
按需引入
为了更好的看出完整引入和按需引入的差别 可以先对项目进行打包
npm run build
相关步骤看官网即可
vue路由的使用
npm i [email protected]
main.js引入router
import router from './router'
new Vue({
router,
render: h => h(App),
}).$mount('#app')
src下创建router文件夹下面有index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: "Home",
component: () => import('../views/Home')
}
]
const router = new VueRouter({
routes,
mode: 'history'
})
export default router
views文件夹放置对应的路由页面Home.vue
想要显示的页面上要写
首页整ui的搭建
使用Container布局容器
想要使用less npm i less npm i [email protected]
views/Main.vue
左侧菜单栏的引入
navmenu
commponet/CommonAside.vue
一级菜单的实现
导航栏的文本以及数据可以存储在一个数组中，每一个在里面又是一个对象
menu: [
{
path: '/',
name: 'home',
label: '首页',
icon: 's-home',
url: 'Home/Home'
},
{
path: '/mail',
name: 'mail',
label: '商品管理',
icon: 'video-play',
url: 'MallManage/MallManage'
},
{
path: '/user',
name: 'user',
label: '用户管理',
icon: 'user',
url: 'UserManage/UserManage'
},
{
label: '其他',
icon: 'location',
children: [
{
path: '/page1',
name: 'page1',
label: '页面1',
icon: 'setting',
url: 'Other/PageOne'
},
{
path: 'page2',
name: 'page2',
label: '页面2',
icon: 'setting',
ulr: 'Other/PageTwo'
}
]
}
]
处理数据使用计算属性computed
computed: {
noChildren() {
return this.menu.filter(item => !item.children)
},
hasChildren() {
return this.menu.filter(item => item.children)
}
}
//判断是否有子项 没有的话就是一级菜单