Vue的使用（二）-基础升级

一.环境的准备

使用vue的前提就是有node.js的环境
1.进入node.js官网下载
node.js官网
下载完成安装，会自动配置好环境
1.2安装淘宝镜像加速
安装完后可以使用cnpm 代替 npm 进行操作,但是可能有问题

npm install cnpm -g

2.安装vue-cli

npm install vue-cli -g

安装完成后，可以检验是否安装成功

vue list

二.第一个vue-cli应用

1.如在D:\MyDesktop\myproject中创建这个项目
2.首先使用管理员运行cmd，然后使用cd命令进入到c这个目录
3.然后创建vue项目

vue init webpack myvue01

4.然后进入项目中，进行启动

cd myvue01
npm install
npm run dev

5.启动以后你就可以通过http://localhost:8080进行访问了

三.webpack 学习

webpack 是一个现代的javaScript应用程序静态模块打包器（module bundler)。
他能把ES6规范的打包成ES5规范。

1.安装

运行下面两个命令

npm install webpack -g

npm install webpack-cli -g

然后查看是否成功

webpack -v

2.简单使用

1.创建一个空项目。随便创一个空文件夹，然后用idea，open这个文件夹就行了
2.创建一个modules的目录，用于放置JS模块等资源文件
3.在modules下创建模块文件，如hello.js，用于编写JS模块相关代码

//ES语法 暴露一个方法exports
exports.sayHi = function () {
document.write("<h1>webpack-study</h1>")
}

4.在modules下创建main.js,作为入口文件，用于打包时设置entry属性

//导入一个模块 require
var hello = require("./hello");
hello.sayHi();

5.在项目目录下创建webpack.config.js配置文件，指定入口文件，和出口位置

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

6.控制台使用webpack命令打包，就会生bundle.js

webpack

四.vue-router路由

1.安装

npm install vue-router --save-dev

安装后就可以引入路由了

2.在components中创建一个组件Content.vue 用来作为主内容模块

<template>
    <h1>内容页</h1>
</template>

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

<style scoped>

</style>

3.再创一个Main.vue作为首页

<template>
  <h1>首页</h1>
</template>

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

<style scoped>

</style>

4.在src下的router目录下创建一个index.js作为路由

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

//配置导出路由
export default new VueRouter({
//注册路由
  routes:[{
    //路由路径
    path:'/content',
    name:'content',
    //路由跳转组件
    component:Content
  },{
    path:'/main',
    name:'main',
    component:Main
  }]
});

5.在src下的main.js中配置路由

import Vue from 'vue'
import App from './App'
import router from './router' //自动扫描里面的路由组件
Vue.config.productionTip = false


new Vue({
  el: '#app',
  //配置路由
  router,
  components: { App },
  template: '<App/>'
})

6.最后在App.vue的template中使用路由

<template>
  <div id="app">
<h1>学习</h1>
    <!--    相当于a标签-->
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
<!--    展示component-->
    <router-view></router-view>

  </div>
</template>

五.npm命令解释

命令	解释
npm install moduleName	安装模块到项目目录
npm install -g moduleName	-g 的意思是将模块安装到全局，具体安装到哪个磁盘的位置，要看npm config prefix的位置
npm install -save moduleName	–save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖，-S 为该命令的缩写
npm install -save-dev moduleName	–save-dev 的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D 为该命令的缩写

六.完整的使用一次

1.管理员模式运行cmd,并且来到你放工程的目录

cd 你的路径

2.创建一个工程myvue02

vue init webpack myvue02

3.进入工程目录

cd myvue02

4.安装路由

npm install vue-router --save-dev

5.安装element ui

npm i element-ui  -S

6.安装SASS加载器

npm install sass-loader node-sass --save-dev

7.安装axios

npm install --save vue-axios

8.安装依赖

npm install

9.启动

npm run dev

如果能访问到就成功了，确定之后ctrl+z ，按y停掉服务

10.用idea open这个项目
11.编写一个View

<template>
  <div>
    <el-row class="tac">
      <el-col :span="4">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航一</span>
            </template>
            <el-menu-item-group>
              <template slot="title">选择</template>
              <el-menu-item index="1-1">
                <router-link to="/main">Main</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <router-link :to="{name:'login',params:{name:5}}">Login</router-link>
              </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">
              <template slot="title">选项4</template>
              <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>
      </el-col>
      <el-col :span="20">

      </el-col>
    </el-row>
   <router-view></router-view>

  </div>

</template>

<script>
    export default {
        name: "Main",
      beforeRouteEnter:(to, from, next) => {

        next(vm => {
          vm.getData();
        })
      },
      beforeRouteLeave:(to, from, next) => {
        next()
      },
       methods: {
         handleOpen(key, keyPath) {
           console.log(key, keyPath);
         },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        },
         getData:function () {
          this.axios({
            method:'get',
            url:'http://localhost:8082/hello'
          }).then(function (response) {
            console.log(response)
          })
         }
      }
    }
</script>

<style scoped>

</style>

12.编写路由

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

13.在app.vue中添加路由视口

<template>
  <div id="app">

   <router-view></router-view>
  </div>
</template>

14.编写入口文件main.js的代码

import Vue from 'vue'
import App from './App'
import router from './router'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)
Vue.use(router);
Vue.use(Element)


new Vue({
  el: '#app',
  router,
  render:h=>h(App) //Element UI
})

10.再次启动服务，之后访问/main就可以看到页面了

npm run dev