vuecli的简单使用

卷 vue

vue

发布日期: 2021-06-30

文章字数: 3.1k

阅读时长: 15 分

1. vue安装

vue2项目我们一般使用vetur，
vue3项目官方建议使用volar，
所以使用vue2的时候禁止volar，
使用vue3禁止volar
注意：vue-cli版本和vue版本无关

1.1 npm安装

指定版本：

3.0以下:npm install -g vue-cli@版本号

3.0以上:npm install -g @vue/cli@版本号

不想指定就去掉@版本号

npm install -g @vue/cli

1.2 验证安装

vue -V

1.3 创建项目

1.命令

vue create vue-manage

2.有选择yarn的选项就选yarn ，没有先安装yarn\

2. element-ui的使用

2.1 npm引入element-ui

cnpm i element-ui -D

2.2 element-ui引入和使用

https://element.eleme.io/#/zh-CN/component/quickstart

2.2.1 全局引入

import Vue from 'vue'
import App from './App.vue'//引入

import ElementUI from 'element-ui';
Vue.config.productionTip = false


Vue.use(ElementUI);//使用

new Vue({
  render: h => h(App),
}).$mount('#app')

然后再vue页面使用element-ui的代码就可以了

2.2.2 按需引入

全局引入在构建打包的时候会包含很多不需要的文件，因此有了按需引入
可以打包查看dist体积\

npm run build

babel-plugin-component
借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
```
npm install babel-plugin-component -D
```

复制element文档中的配置到babel.config.js

   "plugins": [
  [
    "component",
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]
]

解构组件

import Vue from 'vue'
import App from './App.vue'
import { Button } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import './assets/css/reset.css'; //添加重置样式

Vue.config.productionTip = false //是否开启生产模式 非生产模式会存在一定输出提示

Vue.use(Button);
new Vue({
  render: h => h(App),
}).$mount('#app')

2.3 启动服务

npm run serve

3. Vue路由

单页应用比如 vue、react、angular 等框架都是单页应用的思想，也能实现页面跳转，只不过方式不同，比如有a,b两个页面，访问时是 xxx/#/a , xxx/#/b (hash方式) ，通过#后的路径参数表示页面，然后由 vue路由监测并做出响应，没有真正进行跳转，这种方式使得在切换页面时流畅无卡顿(除去网络因素)。
单页应用的优缺点:
https://juejin.cn/post/6950100237985775623

当然Vue也是可以做多页应用的，所谓多页应用就是多个页面。
多页一般情况下会和服务端渲染联系在一起，适合场景：
1、seo要求高
2、首屏时间要求高

3.1 安装

在项目中安装指定版本，因为vue2只能用router3版本，直接安装会报错

cnpm i vue-router@3.2.0

如果自定义安装项目时安装了vue-router可不用

3.2 创建路由页面文件夹与文件

vue-manage\src\views\Home.vue

<template>
  <div>这是vue路由页面</div>
</template>

<script>
export default {
  name: "IndexHome", //eslint代码规范检查
  data() {
    return {};
  },
};
</script>

3.3 创建路由文件夹与文件

vue-manage\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.vue') // 这个动态导入会返回一个 `Promise` 对象。
    }
]

const router = new VueRouter({
    mode: 'history',
    routes //这里是需要routes属性的，所以如果是其它名字请写成routes ：xxx
})

export default router; //对外暴露

这里使用局部注册 https://cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6

3.3 main.js 引入

import Vue from 'vue'
import App from './App.vue'
import { Button, Checkbox } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import router from "./router";//这里会直接引入index.js

Vue.config.productionTip = false //是否开启生产模式 非生产模式会存在一定输出提示
Vue.use(Button);
Vue.use(Checkbox);

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

为什么可以直接引入文件夹：
http://t.zoukankan.com/goloving-p-8889585.html(存疑)

3.4 使用 router-link跳转

vue-manage\src\components\HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <router-link to="/user">
      <el-button @click="showMessage" type="primary">主要按钮</el-button>
    </router-link>
  </div>
</template>

添加模板 /views/User.vue 模板

和上面一下，在router/index.js中配置/user的路由

{
    path: '/user',
    name: 'User',//方便函数式编程使用，可以不要
    component: () => import('../views/User.vue') // 这个动态导入会返回一个 `Promise` 对象。
},

跳转后App.vue中的router-view会自动切换component

4. 使用elementUI进行首页布局

安装less-loader

cnpm i less-loader@6.0.0

4.1 使用布局容器

<el-container>
  <el-aside width="auto">Aside</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
  </el-container>
</el-container>

4.2 封装侧边栏布局(Aside部分)

复制element上的代码，封装到components

<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
  <el-submenu index="1">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span slot="title">导航一</span>
    </template>
    <el-menu-item-group>
      <span slot="title">分组一</span>
      <el-menu-item index="1-1">选项1</el-menu-item>
      <el-menu-item index="1-2">选项2</el-menu-item>
    </el-menu-item-group>
    <el-menu-item-group title="分组2">
      <el-menu-item index="1-3">选项3</el-menu-item>
    </el-menu-item-group>
    <el-submenu index="1-4">
      <span slot="title">选项4</span>
      <el-menu-item index="1-4-1">选项1</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="2">
    <i class="el-icon-menu"></i>
    <span slot="title">导航二</span>
  </el-menu-item>
  <el-menu-item index="3" disabled>
    <i class="el-icon-document"></i>
    <span slot="title">导航三</span>
  </el-menu-item>
  <el-menu-item index="4">
    <i class="el-icon-setting"></i>
    <span slot="title">导航四</span>
  </el-menu-item>
</el-menu>

样式也要

<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>

<script>
  export default {
    data() {
      return {
        isCollapse: true
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

在home中调用

<template>
  <el-container>
    <el-aside width="auto">
      <common-aside></common-aside>
      <!-- 小写-写法遵循vue规范 -->
    </el-aside>
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
    </el-container>
  </el-container>
</template>

<script>
import CommonAside from "../components/CommonAside.vue";
export default {
  name: "IndexHome", //eslint代码规范检查
  components: {
    CommonAside,
  },
  data() {
    return {};
  },
};
</script>

4.还需要在main.js对每个组件进行引入

import { Button, Checkbox, Container, Header, Main, Menu, Submenu, MenuItem, MenuItemGroup } from 'element-ui';

同时Vue.use它们

4.3 侧边栏数据完善1

按照UI图对原有element组件机型调整，主要有以下步骤：

设置侧边栏常展开
根据UI的实际应用，删除导航三和四保留导航一和二，并且顺序变为导航二、一
data定义导航栏数据menu
进行渲染准备使用computed
computed filter出noChildren() hasChildren
渲染noChildren()

4.4 侧边栏数据完善2

在导航栏顶部添加标题
渲染hasChildren的一级和二级

4.5 侧边栏样式完善

对于组件的样式,组件有属性方法使用属性方法，没有属性方法的自定义。

4.6 配置路由

在侧边栏组件页面下使用this.$router.push({name:’’})跳转路由（之前在index.js为路由配置了name属性，函数式编程）

在没有配置路由的在index.js补充,new routes({})children属性可以配置子路由，这样子路由path无需写前缀

<template>
  <el-menu
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#FDCC4B"
    default-active="/page1"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    :collapse="isCollapse"
    :default-openeds="['/other']"
  >
    <h3>通用后台管理系统</h3>
    <el-menu-item
      v-for="value in noChildren"
      :key="value.name"
      :index="value.path"
      @click="clickMenu(value)"
    >
      <i :class="`el-icon-${value.icon}`"></i>
      <span slot="title">{{ value.label }}</span>
    </el-menu-item>

    <el-submenu
      v-for="value in hasChildren"
      :key="value.path"
      :index="value.path"
    >
      <template slot="title">
        <i :class="`el-icon-${value.icon}`"></i>
        <span slot="title">{{ value.label }}</span>
      </template>

      <el-menu-item-group
        v-for="item in value.children"
        :key="item.path"
        :index="item.path"
        @click="clickMenu(value)"
      >
        <el-menu-item :index="item.path">{{ item.label }}</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<style  lang="less" scope>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100vh;
}
.el-menu {
  border: none;
  h3 {
    font-weight: bold;
    color: #fff;
    text-align: center;
    line-height: 48px;
  }
}
</style>

<script>
export default {
  data() {
    return {
      isCollapse: false,
      menu: [
        {
          path: "/",
          name: "home",
          label: "首页",
          icon: "s-home",
          url: "Home/Home",
        },

        {
          path: "/mall",
          name: "mal1",
          label: "商品管理",
          icon: "video-play",
          url: "MallManage/MallManage",
        },
        {
          path: "/user",
          name: "user",
          label: "用户管理",
          icon: "user",
          url: "UserManage/UserManage",
        },
        {
          label: "其他",
          icon: "location",
          path: "/other",
          children: [
            {
              path: "/page1",
              name: "page1",
              label: "页面1",
              icon: "setting",
              url: "Other/Pageone",
            },
            {
              path: "/page2",
              name: "page2 ",
              label: "页面2",
              icon: "setting",
              url: "Other/PageTwo",
            },
          ],
        },
      ],
    };
  },

  computed: {
    noChildren() {
      return this.menu.filter((item) => !item.children);
    },
    hasChildren() {
      return this.menu.filter((item) => item.children);
    },
  },

  methods: {
    clickMenu(item) {
      console.log(this);

      //函数式编程
      this.$router.push({
        name: item.name,
      });
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

4.4 兄弟组件通讯

commonheader 操作 commonaside

4.4.1 使用vuex

vue2指定vuex3版本

cnpm i vuex@3

1.安装好后创建store文件夹
2.store创建index.js和tab.js
3.在tab.js定义状态和状态的监视，export default 暴露
4.index.js引入tab.js和vue、vuex，export default 暴露
5.main.js引入
6.computed 调用状态 this.$store.state.tab.isCollapse;
7.改变状态 this.$store.commit(“collapseMenu”);

4.5 axios的使用

cnpm i axios

可自定义封装
引入axios，由于不是插件不能use只能挂载到原型
Vue.prototype.$axios = axios;

方法写在mouted，是已挂载，使用阶段的生命周期函数

4.6 Echarts的使用

cnpm下载
```
cnpm i echarts@5.1.2
```
导入
可以在main.js导入后挂载在vue原型上，也可以在vue页面的script标签内进入单页导入

[具体配置]https://echarts.apache.org/zh/api.html#echarts

iamfugui

https://iamfugui.github.io/2021/06/30/note/vue-vuecli-de-jian-dan-shi-yong/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 iamfugui !

卷 vue

vue-组件是一个Vue实例吗

2021-07-03 vue

卷 vue

运算符与运算符优先级

2021-06-27 js

js 运算符

1. vue安装

1.1 npm安装

1.2 验证安装

1.3 创建项目

2. element-ui的使用

2.1 npm引入element-ui

2.2 element-ui引入和使用

2.2.1 全局引入

2.2.2 按需引入

2.3 启动服务

3. Vue路由

3.1 安装

3.2 创建路由页面文件夹与文件

3.3 创建路由文件夹与文件

3.3 main.js 引入

3.4 使用 router-link跳转

4. 使用elementUI进行首页布局

4.1 使用布局容器

4.2 封装侧边栏布局(Aside部分)

4.3 侧边栏数据完善1

4.4 侧边栏数据完善2

4.5 侧边栏样式完善

4.6 配置路由

4.3 编写header样式

4.4 兄弟组件通讯

4.4.1 使用vuex

4.5 axios的使用

4.6 Echarts的使用

你的赏识是我前进的动力