教學(xué)視頻：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命令不能使用，則進(jìn)入npm對應(yīng)的安裝目錄下執(zhí)行即可)
命令:vue-list

搭建一個vue.js的腳手架

通過命令行創(chuàng)建一個vue-cli程序

1. 隨便選一個目錄,用vue-init命令創(chuàng)建一個程序

   
   
   image.png
   
   
   image.png

2. 初始化并運(yùn)行
   命令：cd myvue
   npm install
   npm run dev

   
   
   image.png
   
   

   安裝成功會有node_modules文件夾：

   
   
   image.png
   
   項(xiàng)目創(chuàng)建成功后，可以運(yùn)行npm run dev，即可訪問Vue.js成功頁面。
   
   image.png

3. 引入組件的方式

   
   
   image.png

關(guān)于webpack

官網(wǎng)：https://www.webpackjs.com/concepts/
本質(zhì)上，webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時，它會遞歸地構(gòu)建一個依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。

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

image.png

Vue Router介紹

官網(wǎng):https://router.vuejs.org/zh/
安裝:https://router.vuejs.org/zh/installation.html
可以使用命令行在項(xiàng)目中安裝:( 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: [
    {
      //路由路徑  相當(dāng)有后端的controller請求路徑
      path: '/content',
      name: 'content',
      component: Content
    },
    {
      path: '/main',
      name: 'main',
      component: Main
    }
  ]
});

寫完路由之后，需要在main.js中聲明應(yīng)用路由：

// 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' //自動掃描里面的路由配置 因?yàn)槠鹈麨閕ndex

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">內(nèi)容頁</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

關(guān)于Element UI

官網(wǎng)：https://element.eleme.cn/#/zh-CN/guide/design
安裝：https://element.eleme.cn/#/zh-CN/component/installation
新搭建一個工程的步驟:

image.png

Npm命令解釋:

image.png

應(yīng)用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' //自動掃描里面的路由配置 因?yàn)槠鹈麨閕ndex
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/>'
})

應(yīng)用方式：在官網(wǎng)組件直接復(fù)制對應(yīng)模板代碼應(yīng)用即可.
值得注意的是：
1.template模板中的內(nèi)容不能直接應(yīng)用，需要加一層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",)
然后執(zhí)行npm install 或者cnpm install重新安裝編譯

<template>
  <div>
    <div class="block">
      <span class="demonstration">默認(rèn)不區(qū)分顏色</span>
      <el-rate v-model="value1"></el-rate>
    </div>
    <div class="block">
      <span class="demonstration">區(qū)分顏色</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

關(guān)于Vue參數(shù)傳遞和重定向

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