Vue实验记录

webpack安装

首先下载node.js

https://nodejs.org/en

下载完成后进行安装，直接下一步就可以

安装完成后，在cmd中查看是否安装成功

然后安装webpack

安装脚手架

创建项目

选择第二个

创建完成后的效果

进入项目并运行

在学习通中下载源码，把源码按照项目格式放到创建好的项目中

目录格式

App.vue

<template>
  <div class="tabBox">
    <ul class="tab">
        <li :class="{active : active == 'new'}" @click="showNew">最新</li>
        <li :class="{active : active == 'hot'}" @click="showHot">热门</li>
        <li :class="{active : active == 'recommend'}" @click="showRecommend">推荐</li>
    </ul>
    <router-view/>
  </div>
</template>

<script>
export default {
	name : 'app',
	data : function(){
		return {
			active : 'new'
		}
	},
	methods : {
		showNew : function(){
			this.active = 'new';
			this.$router.push({ name: 'new'});//跳转到最新新闻
		},
		showHot : function(){
			this.active = 'hot';
			this.$router.push({ name: 'hot'});//跳转到热门新闻
		},
		showRecommend : function(){
			this.active = 'recommend';
			this.$router.push({ name: 'recommend'});//跳转到推荐新闻
		}
	}
}
</script>

<style>
@import './assets/css/style.css';  /*引入公共CSS文件*/
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'//引入router.js文件

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)//渲染视图
}).$mount('#app')

然后在vue.config.js中添加一条代码

然后在项目目录下安装vue-router

npm install --legacy-peer-deps  vue-router@3 

安装完成后运行项目

成功运行