Vue的入门学习笔记(二)

教学视频：https://www.bilibili.com/video/BV18E411a7mC

nodejs安装

安装教程:https://www.runoob.com/nodejs/nodejs-install-setup.html
安装完成后，可以用 node -v命令查看是否安装成功.

安装镜像加速

Node.js安装淘宝镜像
命令：npm install cnpm -g
安装vue-cli
cnpm install vue-cli -g
查看是否成功 (如果vue-list命令不能使用，则进入npm对应的安装目录下执行即可)
命令:vue-list

搭建一个vue.js的脚手架

通过命令行创建一个vue-cli程序

随便选一个目录,用vue-init命令创建一个程序

image.png

image.png
初始化并运行
命令：cd myvue
npm install
npm run dev

image.png

安装成功会有node_modules文件夹：

image.png

项目创建成功后，可以运行npm run dev，即可访问Vue.js成功页面。

image.png
引入组件的方式

image.png

关于webpack

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

安装命令：npm install webpack -g
npm install webpack-cli -g

image.png

Vue Router介绍

官网:https://router.vuejs.org/zh/
安装:https://router.vuejs.org/zh/installation.html
可以使用命令行在项目中安装:( npm install vue-router --save-dev)
路由简单demo：

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: [
    {
      //路由路径  相当有后端的controller请求路径
      path: '/content',
      name: 'content',
      component: Content
    },
    {
      path: '/main',
      name: 'main',
      component: Main
    }
  ]
});

写完路由之后，需要在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'
// import VueRouter from "vue-router"
import router from './router' //自动扫描里面的路由配置 因为起名为index

Vue.config.productionTip = false

//显示声明使用VueRouter

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

然后就是在App.vue中引用路由

<template>
  <div id="app">
    <h1>路由</h1>
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <router-view></router-view>

  </div>
</template>

<script>
  import Content from "./components/Content";
  import Main from "./components/Main";

export default {
  name: 'App'
}
</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>

效果如图：

image.png

关于Element UI

官网：https://element.eleme.cn/#/zh-CN/guide/design
安装：https://element.eleme.cn/#/zh-CN/component/installation
新搭建一个工程的步骤:

image.png

Npm命令解释:

image.png

应用Element UI 快速上手:https://element.eleme.cn/#/zh-CN/component/quickstart

// 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 VueRouter from "vue-router"
import router from './router' //自动扫描里面的路由配置 因为起名为index
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

//显示声明使用VueRouter
Vue.use(router);
Vue.use(ElementUI);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  //配置路由
  router,
  render: h => h(App),
  components: { App },
  template: '<App/>'
})

应用方式：在官网组件直接复制对应模板代码应用即可.
值得注意的是：
1.template模板中的内容不能直接应用，需要加一层div。
报错原因:Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
解决方式可以看博客:https://blog.csdn.net/yangyiboshigou/article/details/72084619
2.package.json中的sass-loader版本不能太高,需要降低版本到7.3.1("sass-loader": "^7.3.1",)
然后执行npm install 或者cnpm install重新安装编译

<template>
  <div>
    <div class="block">
      <span class="demonstration">默认不区分颜色</span>
      <el-rate v-model="value1"></el-rate>
    </div>
    <div class="block">
      <span class="demonstration">区分颜色</span>
      <el-rate
        v-model="value2"
        :colors="colors">
      </el-rate>
    </div>
  </div>
</template>

<script>
    export default {
        name: "Content",
      data() {
        return {
          value1: null,
          value2: null,
          colors: ['#99A9BF', '#F7BA2A', '#FF9900']  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
        }
      }
    }
</script>

<style scoped>

</style>

效果图如下:

image.png

关于Vue参数传递和重定向

引用博客:https://www.cnblogs.com/pinked/p/12329626.html
该博客中有demo.