一、创建VUE项目

1. 安装node.js npm vue这里不说了。

 

 

2. 使用命令创建项目

2.1 创建一个文件夹，用来放vue项目的代码

D:\vuecode

2.2 以管理员身份进入cmd，进入vue项目代码的目录，输入命令，其中"testvue01"为项目名称

vue create testvue01

 2.3 选择vue版本，这里我选的是vue2.

 

创建过程可能要等很久

 

2.4 用vscode启动项目

在vscode中打开终端控制台，输入命令

npm run serve

 

 

3. 项目文件

3.1 app.vue文件

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</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>

<template> 标签中写html代码

<script>标签中写js代码

<style>标签中写css代码

4. 测试vue

4.1 效果演示。页面上有一个按钮，每点一次，控制台输出点击按钮次数

 4.2 代码

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <div>
      hello world 123456
    </div>
  <div>
    <button name="点我" @click="pickMe">点我,已经点了我{{i-1}}次</button>
  </div>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import { fun1 } from '@/db/test.js' ;

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      i:1
    }
  },
  methods: {
    pickMe(){
      fun1(this.i);
      this.fun2();
    },
    fun2(){
        this.i++;
    }
  },
}
</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>

test.js

export function fun1(i){
    console.log('已经点了我'+i+"次");
}

4.3 代码说明

test.js文件中的方法fun1(){}，用于在控制台输出，i为参数。

App.vue文件中，

import { fun1 } from '@/db/test.js' ;

表示引用 test.js文件中的fun1方法；

 data() {
    return {
      i:1
    }
  },
// 定义全局变量i

methods: {
    pickMe(){
      fun1(this.i);
      this.fun2();
    },
    fun2(){
        this.i++;
    }
  },
// pickMe方法在点击按钮时调用
// fun2方法控制全局变量i的值

// 这里需要注意，fun1方法写在了test.js文件中，直接调用；
// 而fun2()方法写在App.vue的methods块中，需要使用this.fun2()调用
// 作为全局变量的i，调用时也需要使用this