Vue 入门这是我参与8月更文挑战的第16天，活动详情查看：8月更文挑战安装node.js 傻瓜式安装就行了安装完打

这是我参与8月更文挑战的第16天，活动详情查看：8月更文挑战

安装node.js 在这里插入图片描述傻瓜式安装就行了

安装完打开命令行在这里插入图片描述出来版本号就ok 了 创建我的第一个vue 项目 打开你要创建的位置 如何在idea 执行 run 命令

模块化的演进 script 标签这是最原始的JavaScript文件加载方式，如果把每-一个文件看做是一一个模块,那么他们的接口通常是暴露在全局作用域下，也就是定义在window对象中，不同模块的调用都是-一个作用域。这种原始的加载方式暴露了一些显而易见的弊端: ●全局作用域下容易造成变量冲突 ●文件只能按照服务器端的NodeJS遵循CommonsJS规范，该规范核心思想是允许模块通过require方法来同步加载所需依赖的其它模块，然后通过exports或module.exports来导出需要暴露的接口。优点: ●服务器端模块便于重用 ●NPM中已经有超过45万个可以使用的模块包 ●简单易用缺点: ●同步的模块加载方式不适合在浏览器环境中，同步意味着阻塞加载,浏览器资源是异步加载的 ●不能非阻塞的并行加载多个模块实现: ●服务端的NodeJS ●Browserify, 浏览器端的CommonsJS实现，可以使用NPM的模块，但是编译打包后的文件体积较大 ●modules-webmake,类似Browserify，但不如Browserify灵活 ●wreq，Browserify的前身 Adm Asynchronous Module Definition规范其实主要- -个主要接口define(id?, dependencies?, factory);它要在声明模块的时候指定所有的依赖dependencies,并且还要当做形参传到factory中，对于依赖的模块提前执行。优点 ●适合在浏览器环境中异步加载模块 ●可以并行加载多个模块缺点 ●提高了开发成本，代码的阅读和书写比较困难，模块定义方式的语义不畅 ●不符合通用的模块化思维方式，是一种妥协的实现实现 ● RequireJS ●curl . CMD Commons Moule Definition规范和AMD很相似，尽量保持简单，并与CommonsJS和 NodeJS的Modules 规范保持了很大的兼容性。优点: ●依赖就近，延迟执行 ●可以很容易在NodeJS中运行缺点 ●依赖SPM打包，模块的加载逻辑偏重实现 ●Sea.js . ES6模块 EcmaScript6标准增加了JavaScript语言层面的模块体系定义。ES6 模块的设计思想，是尽量静态化，使编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonsJS 和AMD模块，都只能在运行时确定这些东西。优点 ●容易进行静态分析 ●面向未来的EcmaScript标准缺点 ●原生浏览器端还没有实现该标准 ●全新的命令，新版的NodeJS才支持实现 ●Babel 安装Webpack 命令 npm install webpack -g npm install webpack-cli -g 配置创建webpack,config.js 配置文件 entry 入口文件，指定webpack 用那个文件作为项目的入口 output 输出，指定webpak 把处理完成的文件放置到指定路径 module 模块，用于处理各种类型的文件 plugins 插件，如热更新，代码重用等 resolve 设置路径指向 watch 监听，用于设置文件改动后直接打包 写打包测试的demo 新建一个文件夹，用idea 打开在这里插入图片描述

在这里插入图片描述

在这里插入图片描述效果 Vue router 路由 安装前检查有无 vue-router插件包，没有输入命令下载。 npm install vue-router --sava-dev 如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能

import Vue  from 'vue'
import VueRouter from 'vue-router'
import Cotent from "../components/Cotent"
//安装路由
Vue.use(VueRouter)

第一个路由的demo 目录结构在这里插入图片描述内容页的

<template>
    <p style="color: aquamarine">我是内容页</p>
</template>

<script>
    export default {
        name: "content"
    }
</script>

<style scoped>

</style>

在这里插入图片描述

import Vue  from 'vue'
import VueRouter from 'vue-router'
import Cotent from "../components/Cotent"
//安装路由
Vue.use(VueRouter)
//配置导出路由
export default new VueRouter({
  routes: [

    {
      //路由路
      path: '/content',

      component: Cotent
    }
  ]




})

在这里插入图片描述把我们自己写的路由放到里面在App.vue 里效果点击点我会出来。 Vue+element 1,新建一个项目命令：npm install vue-router --save-dev 2.安装 element-ui npm i element-ui -S 3,安装依赖 npm install 4,安装Sass 加载器 npm install sass=loader node-sass --save-dev 5,启动测试 Npm 命令解释 npm install moduleName: 安装模块到项目目录下 npm install -g modeleName: -g 的意思是安装到全局 npm install -save modeleaName --save 的意思是将模块安装到项目目录下 我的第一个element 的demo 在这里插入图片描述页面登陆的

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export  default {
    name:"Login",
    data(){
      return {
        form:{
          username: '',
          password: ''
        },
        //表单验证，需要再el-form-item 元素中增加prop属性
        rules:{
          username:[
            {required:true,message:'账号不能为空',trigger:'blur'}
          ],
      password:[
      {required: true,message: '密码不能为空',trigger:'blur'}
          ]
    },
      //对话框显示和隐藏
      dialogVisible:false
    }
    },
    methods:{
      onSubmit(formName) {
        //为表单绑定验证功能
        this.$refs[formName].validate((valid) =>{
          if (valid){
            //使用 vue-router路由到指定页面，该方式称之为编程式导航
            this.$router.push("/main");
          } else {
            this.dialogVisible = true;
            return false;
          }
        });
      }
    }
  }
</script>
<style lang="scss" scoped>
  .login-box{
    border: 1px solid #DCDFE6;
    width: 350px;
    margin:180px auto;
    padding:35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow:0 0 25px #909399;
  }

  .login-title{
    text-align:center;
    margin:0 auto 40px auto;
    color:#303133;
  }
</style>

首页就写了一句话设置路由

import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login';
Vue.use(Router)
export default new Router({
  routes:[
    {
      path: '/main',
      component :Main
    }
    ,{
      path: '/login',
      component :Login
    }
  ]

})

Main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(router);
Vue.use(ElementUI)
new Vue({
  el: '#app',
  components: { App },
  router,
  template: '<App/>',
  render: h => h(App)
})

最后在APP.VUE 在这里插入图片描述效果 小总结如果启动报错，可以修改一下 路由嵌套 嵌套路由又称子路由，在实际应用中，通常由多层的组件组合而成，同样地Url 中各段态路径也按某种结构对应嵌套的各层组件，

1,修改首页

<template>
  <div>
<el-container>
  <el-aside width="200px">
    <el-menu :default-openeds="['1']">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
        <el-menu-item-group>
          <el-menu-item index="1-1">
            <router-link to="/user/profile">个人信息</router-link>
          </el-menu-item>
          <el-menu-item index="1-2">
            <router-link to="/user/list">用户列表</router-link>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
        <e1-menu-item-group>
          <el-menu-item index="2-1">分类管理</el-menu-item>
          <el-menu-item index="2-2">内容列表</el-menu-item>
        </e1-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-aside>
  <el-container>
    <el-header style="text-align: right; font-size: 12px">
      <el-dropdown>
        <i class="el-icon-setting" style="margin-right:15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人信息</el-dropdown-item>
          <el-dropdown-item>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>

    <el-main>
      <router-view/>
    </el-main>

  </el-container>
</el-container>
</div>
</template>

<script>
  export default {
    name: "Main"
  }
</script>

<style scoped lang="scss">
  .el-header {
    background-color: #048bd1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>