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. CSS基础-关于CSS注释的添加

    在 CSS 中增加注释很简单,所有被放在/*和*/分隔符之间的文本信息都被称为注释. CSS 只有一种注释,不管是多行注释还是单行注释,都必须以/*开始.以*/结束,中间加入注释内容. 1.注释放在样 ...

  2. IDEA生成带参数和返回值注释

    步骤说明 打开IDEA进入点击左上角 - 文件 - 设置 - 编辑器 - 活动模板 新建活动模板 填写模板文本 编辑变量 添加变量表达式 设置模板使用范围-设置全部范围应用-或者设置只在Java代码中 ...

  3. Vue学习之--------Vue中收集表单数据（使用v-model 实现双向数据绑定、代码实现）（2022/7/18）

    文章目录 1.Vue中实现表单数据的收集 1.1 基础知识 1.2 代码实例 1.3 测试效果 1.4 额外插一嘴 1.Vue中实现表单数据的收集 1.1 基础知识 表单中常用的标签:input(输入 ...

  4. 齐博x1客服系统显示客户在哪个页面

    如下图所示,要想实现下面的效果,即显示客户给你发消息时,当时处于哪个商品页面.这样方便跟客户针对此商品进行交流. 你的模板如果使用了碎片的话,就可以添加下面的代码index_style/default ...

  5. C#中的装箱和拆箱

    什么是装箱和拆箱 装箱(boxing)和拆箱(unboxing)是C#类型系统的核心概念.是不同于C与C++的新概念!,通过装箱和拆箱操作,能够在值类型和引用类型中架起一做桥梁. 换言之,可以轻松的实 ...

  6. k8s健康检查报错

    编辑yaml去掉健康检查 kubectl edit deployment deploymentname 服务恢复

  7. 所有selenium相关的库

    通过爬虫 获取 官方文档库 如果想获取 相应的库 修改对应配置即可 代码如下 from urllib.parse import urljoin import requests from lxml im ...

  8. 【lwip】10-ICMP协议&源码分析

    目录 前言 10.1 ICMP简介 10.2 ICMP报文 10.2.1 ICMP报文格式 10.2.2 ICMP报文类型 10.2.3 ICMP报文固定首部字段意义 10.3 ICMP差错报告报文 ...

  9. Node.js的学习（一）node.js 的介绍

    一.简介 1.1.什么是 node.js ? node.js  一种 JavaScript 的运行环境,能够使得javascript能够脱离浏览器运行.以前 js 只能在浏览器基础上运行,能够操作的也 ...

  10. 【云原生 · Kubernetes】部署Kubernetes集群

    [云原生 · Kubernetes]搭建Harbor仓库 接着上次的内容,后续来了! 在master节点执行脚本k8s_master_install.sh即可完成K8S集群的部署,具体步骤参考如下(1 ...