vue-cli是官方提供的一个脚手架，用于快速生成一vue项目，有点类似java中使用maven构建项目

需要环境

Node.js : http://nodejs.cn/download/ 安装完后在Windows的cmd窗口输入 node -v及npm -v 如果有版本号，那么说明安装成功 也可以安装淘宝的镜像，这样下载的话会快很多，安装淘宝镜像后可以使用cnpm指令

# -g 全局安装

npm install cnpm -g

npm config set registry https://registry.npm.taobao.org

npm install cnpm -g

安装位置：C:\Users\Administrator\AppData\Roaming\npm

安装vue-cli

#在命令台输入

cnpm install vue-cli -g

#查看是否安装成功

vue list

创建第一个vue-cli程序

1、在本地磁盘创建一个空文件夹用来存放项目 D:\vue\vuenote 2、使用控制台在该目录下执行创建vue应用程序指令

D:\vue\vuenote>vue init webpack first-vue

3、一路选择no 4、进入项目目录，安装依赖

D:\vue\vuenote>cd first-vueD:\vue\vuenote\first-vue>cnpm install

5、启动项目

npm run dev

打开浏览器输入 http://localhost:8080/

webpack

webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle.

webpack的使用

1、在本地磁盘上创建一个空目录，并使用idea打开

2、按如下结构创建目录和文件

3、在hello.js暴露一个sayhai的方法

exports.sayHai=function () {    document.write("<h1>hello world</h1>")}

4、在main.js导入该方法

var hello=require('./hello')hello.sayHai()

5、在webpack.config.js中配置打包

module.exports={    entry:'./modules/main.js',    output:{        filename:'./js/bundle.js'    }}

6、在idea控制台运行 webpack指令 运行webpack指令后，会在当前项目的生成dist/js/bundle.js 7、在index.html中引入bundle.js文件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <script src="dist/js/bundle.js"></script></body></html>

Vue-Router路由

Vue Router是Vue.js官方的路由管理器（路径跳转）。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。

安装路由

使用idea在当前项目的控制台上输入指令

cnpm install vue-router --save-dev

路由的使用

1、在component目录下创建一个vue组件Content.vue

import Vue from 'vue'

import VueRouter from 'vue-router'

import Content from "../components/Content";

//安装路由

Vue.use(VueRouter);

export default new VueRouter({

  routes:

    [

      {

        //路由路径

        path: '/content',

        name: 'content',

        //跳转的组件

        component: Content

      }

    ]

})

2、在当前项目下创建router目录，router目录下创建用来配置路由的配置文件index.js index.js内容如下：

import Vue from 'vue'

import VueRouter from 'vue-router'

import Content from "../components/Content";

//安装路由

Vue.use(VueRouter);

export default new VueRouter({

  routes:

    [

      {

        //路由路径

        path: '/content',

        name: 'content',

        //跳转的组件

        component: Content

      }

    ]

})

3、在App.vue中配置请求路由

<template>

  <div id="app">

    <img src="./assets/logo.png">

    //请求路由

    <router-link to="/content">内容页</router-link>

    //路由结果在此处展示

    <router-view></router-view>

  </div>

</template>

<script>

export default {

  name: 'App',

  components: {

  }

}

</script>

<style>

#app {

  font-family: 'Avenir', Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

</style>

vue+elementUI

vue配合elementUI可以使我们的页面更加美观

elementUI的使用

1、创建一个新的vue项目

vue init webpack vue_element

2、安装插件（vue-router、element-ui、sass-loader、node-sass）

# 进入工程目录

cd vue_element

# 安装 vue-router

npm install vue-router --save-dev

# 安装 element-ui

npm i element-ui -S

# 安装依赖

npm install

# 安装 SASS 加载器

cnpm install sass-loader node-sass --save-dev

# 启动测试

npm run dev

3、创建一个Login.vue组件，内容如下：

<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>

4、配置路由

import Vue from 'vue'

import VueRouter from 'vue-router'

import Login from "../components/Login";

//安装路由

Vue.use(VueRouter)

export default new VueRouter({

  routes:[

    {

      path:'/login',

      name:'login',

      component:Login

    }

  ]

})

5、在main.js引入路由和elementUI

// 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'

import router from './router'

//导入elementUI

import ElementUI from "element-ui"

//导入element css

import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

Vue.use(router);

Vue.use(ElementUI)

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  render: h => h(App),//ElementUI规定这样使用

})

6、在App.vue中请求路由

<template>

  <div id="app">

        <router-link to="/login">登录</router-link>

        <router-view></router-view>

  </div>

</template>

<script>

export default {

  name: 'App',

  components: {

  }

}

</script>

<style>

#app {

  font-family: 'Avenir', Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

</style>

7、测试 npm run dev

注意：如果项目运行失败，可以在package.json里降低sass-loader和node-sass的版本

"sass-loader": "^7.3.1",

"node-sass": "^4.9.0",

嵌套路由

简单说就是在路由里再套一个子路由

1、创建一个作为子路由Profile.vue组件

<template>

    <h1>用户列表</h1>

</template>

<script>

    export default {

        name: "List"

    }

</script>

<style scoped>

</style>

2、Main.vue里请求路由

<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>

            <el-menu-item-group>

              <el-menu-item index="2-1">分类管理</el-menu-item>

              <el-menu-item index="2-2">内容列表</el-menu-item>

            </el-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: #B3C0D1;

    color: #333;

    line-height: 60px;

  }

  .el-aside {

    color: #333;

  }

</style>

3、测试

参数传递

参数传递过程：url请求路径—->路由接收参数—->跳转套组件显示参数

1、url请求路径

<router-link :to="{name:'Profile',params:{id:1} }">个人信息</router-link>

2、路由接收参数

方式一:

 {path:'/user/profile/:id',name:'Profile',component:Profile},

方式二：

{path:'/user/profile/:id',name:'Profile',component:Profile,props:true}

3、组件模板展示参数

方式一：

{ {$route.params.id} }

方式二：

<template>

  <div>

      { {id} }

    </div>

</template>

<script>

    export default {

    //接收路由传过来的id

        props:['id'],

        name: "Profile"

    }

</script>

<style scoped>

</style>

路由钩子与异步请求

路由模式

hash：路径带 # 符号(默认)，如 http://localhost/#/login history：路径不带 # 符号，如 http://localhost/login

路由钩子与异步请求

beforeRouteEnter：在进入路由前执行 beforeRouteLeave：在离开路由前执行 类似于过滤器，在进入模板前可以使用路由钩子进行异步请求数据，并在模板展示

<template>

  <div>

      { {info.url} }

    </div>

</template>

<script>

    export default {

        props:['id'],

        name: "Profile",

      beforeRouteEnter:(to,from,next)=>{

          console.log("进入页面之前");

          next(vm=>{

           //进入路由之前执行getData方法

            vm.getData()

          });

      },

      beforeRouteLeave:(to,from,next)=>{

          console.log("离开页面之前")

        next();

      },

      //返回请求的数据

      data(){

        return{

          info:{

          }

        }

      },

      methods:{

          getData:function () {

          //使用axios异步请求数据

            this.axios({

              method:'get',

              url:'http://localhost:8080/static/mock/data.json'

            }).then(res=>(this.info=res.data))

          }

      }

    }

</script>

<style scoped>

</style>

【转载】VUE入门教程的更多相关文章

  1. vue入门教程 (vueJS2.X)

    vue入门教程vueJS2.X 写在前面 看完此教程可以达到:能看懂并能修改简单的vue项目. 看的过程中,请把所有例子都放到html文件中跑一遍. Vue.js 是什么 Vue.js(读音 /vju ...

  2. wepack+sass+vue 入门教程（三）

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  3. wepack+sass+vue 入门教程（二）

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  4. wepack+sass+vue 入门教程（一）

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  5. webpack+sass+vue 入门教程（三）

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  6. webpack+sass+vue 入门教程（二）

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  7. webpack+sass+vue 入门教程（一）

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  8. VUE 入门教程

    http://www.runoob.com/w3cnote/vue-js-quickstart.html VUE安装教程 https://segmentfault.com/a/119000001218 ...

  9. 转载 Ofbiz 入门教程

    1.Ofbiz 介绍: Ofbiz(http://www.ofbiz.org) 是 Open Source 的商务软件系统,充分利用了各优秀的的Open Source 项目,像 Tomcat, Ant ...

随机推荐

  1. 老杜ＭySql——34道作业题

    老杜MySql链接:https://www.bilibili.com/video/BV1Vy4y1z7EX?p=132 本次随笔主要来源于老杜MySql讲解视频后面的作业题,加上个人的一些理解,以及整 ...

  2. AVX图像算法优化系列一: 初步接触AVX。

    弄了SSE指令集,必然会在不同的场合不同的人群中了解到还有更为高级的AVX指令集的存在,早些年也确实有偶尔写点AVX的函数,但是一直没有深入的去了解,今年十一期间也没到那里去玩,一个人在家里抽空就折腾 ...

  3. .NET平台下一个你不知道的框架，我只想说两个字：“牛逼”

    框架内容 零度框架是一套基于微服务和领域模型驱动设计的企业级快速开发框架,基于微软 .NET 6 + React 最新技术栈构建,容器化微服务最佳实践,零度框架的搭建以开发简单,多屏体验,前后端分离, ...

  4. MISC 网刃杯2022

    ​ MISC 玩坏的winxp 难度系数:4.0 题目描述:小敏的电脑Windows XP Professional不小心被玩坏了,里边有重要的东西,你能帮帮她吗? 利用whihex挂载 查看分区1 ...

  5. JSP脚本知识

    JSP脚本元素 1.在jsp中嵌入的服务端运行的小程序称为脚本.实质是java程序. 2.脚本元素可以分为三类:表达式.Scriptlet.声明. 表达式 计算java表达式的值,得到的结果转化为字符 ...

  6. 后端框架的学习----mybatis框架（6、日志）

    六.日志 如果一个数据库操作,出现了异常,我们需要排错,日志就是最好的帮手 setting设置 <settings> <setting name="logImpl" ...

  7. AI之强化学习、无监督学习、半监督学习和对抗学习

    1.强化学习 @ 目录 1.强化学习 1.1 强化学习原理 1.2 强化学习与监督学习 2.无监督学习 3.半监督学习 4.对抗学习 强化学习(英语:Reinforcement Learning,简称 ...

  8. 关于 Vue 中 h() 函数的一些东西

    最近在项目上需要一个信息弹窗,来显示信息.一开始只让它弹出了文字,而且只有一条信息.而给我的需求是多条文字和图片,而后我使用了element ui中的 Notification 通知组件来显示.当然, ...

  9. windows下 安装docker

    一.Docker 1.什么是docker 对比 特性 容器 虚拟机 启动 秒级 分钟级 磁盘使用 一般为MB 一般为GB 性能 接近原生 弱于 系统支持量 单机支持上千个容器 一般几十个 2. 使用d ...

  10. Optional用法与争议点

    原创:扣钉日记(微信公众号ID:codelogs),欢迎分享,转载请保留出处. 简介 要说Java中什么异常最容易出现,我想NullPointerException一定当仁不让,为了解决这种null值 ...