Vue的安裝和使用

Vue的安裝和使用

1、安裝Vue

• 安裝環境

  Node.js： http://nodejs.cn/download/
  (就無腦安裝，下一步就好，安裝在自己的環境目錄下)

• 確認nodejs安裝成功：
  • cmd 下輸入node -v，查看是否能夠正確打印出版本號即可！
  • cmd 下輸入npm -v ，查看是否能夠正確打印出版本號即可！
  • 這個npm，就是一個軟件包管理工具

• 安裝Node.js 淘寶鏡像加速器（cnpm）這樣子的話，下載會快很多~~

# –g  就是全局安裝
npm install cnpm -g

• 安裝vue-cli

cnpm install vue-cli -g
# 測試是否安裝成功
# 查看可以基於哪些模板創建vue 應用程序，通常我們選擇webpack
vue list

2、vue-cli應用程序

咱們這兒安裝的版本，支持可視化創建項目，但此處不做介紹，需要請自學！！！

1.創建一個Vue項目，我們隨便建立一個空的文件夾在電腦上，我這里在D盤下新建一個目錄

2.創建一個基於webpack模板的vue應用程序

• vue init webpack 項目名

特別注意：安裝組件和安裝依賴是在你新建的項目路徑中進行，即初始化項目后，使用cd 項目名（這里是cd Vue-Online）進入項目路徑，下面的截圖缺少進入該項目路徑這一步

• 安裝組件（插件）axios、vue-router、element-ui、vuex

  • npm install --save axios vue-axios

  • npm install vue-router --save-dev

  • npm i element-ui -S

  • npm install vuex --save

• 安裝依賴

  • npm install（或cnpm install）

• 如果npm安裝不成功，就使用cnpm

• cnpm install xxx 與npm install xxx --registry=https://registry.npm.taobao.org作用相同

• 進入項目路徑下，然后啟動該項目

3、使用IDEA打開（接管）剛才的“Vue-Online”項目

• 完成Maven相關配置：https://www.cnblogs.com/mc-blog/p/15130344.html（JDK版本不同，自行修改）

• 使用IDEA打開Vue-Online項目，然后安裝Vue插件

• 如果插件一直搜不到，請把文件“vuejs”復制到自己的IDEA安裝路徑下的

• 完成后重啟IDEA，新建Vue文件時，顏色會從灰色變成綠色，此時所有工作都已完成！

4、將項目中src文件夾中的文件全部替換

• components文件夾中的內容

  • Home.vue

  <template>
    <div>
      <div style="color: red;margin-left: 600px;margin-top: 200px">
        首頁設計<br>
        <router-link to="/product">商品頁</router-link>
      </div>
    </div>
  </template>
  
  <script>
  
      export default {
          name: 'Home'
      }
  </script>
  
  <style scoped>
  
  </style>
  

  • Product.vue

  <template>
  <div>
      <div style="color: red;margin-left: 600px;margin-top: 200px">
          商品頁設計
      </div>
      </div>
  </template>
  
  <script>
      export default {
          name: "Product"
      }
  </script>
  
  <style scoped>
  
  </style>
  
  

• router文件夾中的index.js

  import Vue from 'vue'
  import Router from 'vue-router'
  import Home from "../components/Home";
  Vue.use(Router);
  
  export default new Router({
      mode: 'history',
      routes: [
          {
              path: '/', //默認打開頁面
              name: 'Home',
              component: Home  //引用頁面的第一種方式
          },
          {
              path: '/product',
              name: 'Product',
              component: () => import('@/components/Product') //引用頁面的第二種方式
          }
      ]
  });
  

• App.vue

  <template>
    <div id="app">
      <router-view></router-view>
    </div>
  </template>
  
  <script>
  
      export default {
          name: 'App'
      }
  
  </script>
  
  <style scoped>
  
  </style>
  

• 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 ElementUI from 'element-ui'
  import VueRouter from 'vue-router'
  import axios from 'axios'
  import router from './router'
  import Vuex from 'vuex'
  
  
  Vue.use(Vuex);
  Vue.use(ElementUI);
  Vue.use(VueRouter);
  Vue.config.productionTip = false;
  
  Vue.prototype.axios = axios;
  
  
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    render: h => h(App)
  });
  

5、使用IDEA啟動Vue項目