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

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

   
   
   image.png
   
   
   image.png

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

   
   
   image.png
   
   

   安装成功会有node_modules文件夹：

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

3. 引入组件的方式

   
   
   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.vue中引用路由

效果如图：

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: ''
})

应用方式：在官网组件直接复制对应模板代码应用即可.
值得注意的是：
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重新安装编译

效果图如下:

image.png

关于Vue参数传递和重定向

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