Vue-cli脚手架+项目实战

一、vue-cli脚手架

• 1.Node.js环境安装
  https://nodejs.org/zh-cn/

• 2.npm，cnpm, yarn介绍

-S参数：-S是-save的缩写，它表明是将安装包的信息加入生产阶段
-D参数：-D是-save-dev的缩写，所代表的是save和dev这两项的综合，是在开发阶段，所以大多数情况下选择-D

1.安装脚手架 vue-cli

• 1.首先安装全局vue (现在我们已经实现安装)

npm install -g @vue/cli
#查看安装情况
vue -V

2.创建项目

vue create 项目名称

生成

3.继续配置

• 1进入在项目

cd xiaoxiao

• 2.项目跑动起来

npm run serve

4.打包

npm run build

• 生成
  

二、element-ui

官网：https://element.eleme.cn/#/zh-CN

1.安装

• npm 安装 (推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。)

npm i element-ui -S  # npm install vue-router --save-dev

• CDN (目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。)

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2.引入

1、完整引入 ：在 main.js 中写入以下内容：

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

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

2. 按需引入

• 首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

• 然后，将 .babelrc 修改为：

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

• 接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

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

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

• 完整组件列表和引入方式(看官网)

2.演示

三、路由 :vue-router（路由）

• 我们自己创建在src文件夹下创建一个router，然后再创建一个 index.js
• 再在我们项目下创建 views文件夹，有创建一个对象一个.vue ,例如Home.vue
• main.js中记得加入 import router from “./router”
• 在src文件夹App.vue中template组件中添加router-view标签
• 在components文件夹下的HelloWorld.vue中可以根按钮连接等功能

1.安装

npm install vue-router
#指定版本
npm i vue-router@3.5.3

2.创建组件

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能，用vue-cli生产了我们的项目结构，src文件目录下会有一个router文件夹，此处就是编写路由组件的地方。在src/router/index.js，这个文件就是路由的核心文件：

• 我们自己创建在src文件夹下创建一个router，然后再创建一个 index.js

import Vue from 'vue' //引入Vue
import VueRouter from 'vue-router' //引入vue-router
//import Home from "../../views/Home.vue";

Vue.use(VueRouter) //Vue全局使用Router

//配置路由，这里是个数组
const routes=[
    {  //每一个链接都是一个对象
    path:'/',               //链接路径
    name:'Home',             //路由名称，
    component:() =>import('../../views/Home.vue')      //对应的组件模板， import() 按需引入
    // component:Home
    },
    {
        path:'/user',
        name:'User',
        component:() => import('../../views/user.vue')
    }

]

const router=new VueRouter({
    mode:'history',  //路由的匹配模式
    routes
})

//去暴露
export default router

• 再在我们项目下创建 views文件夹，有创建一个对象一个.vue ,例如Home.vue

<template>
    <div>我是Home页面</div>
</template>

<script>
    export default {
        name:'vueHome',
        data(){
            return{}
        }
    }
</script>

同理：user.vue对象

<template>
    <div>我是user页面</div>
</template>

<script>
    export default {
        name:'vueHome',
        data(){
            return{}
        }
    }
</script>

• main.js中记得加入 import router from “./router”

import router from "./router"

• 在src文件夹App.vue中template组件中添加router-view标签
  

• 在components文件夹下的HelloWorld.vue中可以根按钮连接等功能

<template>
  <div class="hello">
      <router-link to="/">
          <el-button>按钮</el-button>
      </router-link>

      <router-link to="/user">
          <el-button type="primary">主要按钮</el-button>
      </router-link>


      <el-radio disabled v-model="radio" label="1">选项</el-radio>
  </div>
</template>

四、项目实战

• 1.脚手架的搭建
• 2.element- ui的使用
  • 网页直接使用
  • 脚手架中使用
    • 全部引入
    • 按需引入
• 3.路由的使用
• 4.首页架子的搭建
  - container的容器
• 5.侧边栏的使用
  - menu的样式

4.首页架子的搭建

• 修改Home.vue 选择想要的容器放入template中

<template>
    <el-container style="height:100%">
        <el-aside width="auto">Aside</el-aside>
        <el-container>
            <el-header>Header</el-header>
            <el-main>Main</el-main>
        </el-container>
    </el-container>
</template>
//样式
<style lang="less" scoped>
    .el-header{
        background-color: #333;
    }
    .el-main{
        padding-top:0;
    }

</style>

5.侧边栏的使用

1.首先找到合适的组件
2.在src文件下的components文件夹下创建自己的组件名称
-例如这里创建的这个侧边组件

3.然后再Home.vue中调用这个组件，因为要往Home.vue中的侧边添加组件，然后 import CommonAside from “@/components/CommonAside.vue”; 再在template里面的侧边添加

5.1侧边绑定添加数据

1.在CommonAside.vue组件中script的data里面添加页面的一些名称和meun[]
2.处理数据
3.循环绑定数据

• 一级标题
  
• 二级标题