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项目