1.确保已安装node

 node下载地址直接点链接 （下载 | Node.js 中文网）

 安装完后打开命令窗口输入：node -v  查看安装与否及版本详情

因为 npm 默认的官方地址是外网的， 可能无法下载成功，如果出现下载卡顿或失败时，可通过修改镜像下载，命令是：

npm config set registry https:/ / registry.npm.taobao.org/

2.全局安装vuecli 脚手架 

继续在上述命令窗口输入：npm i -g @vue/cli  如下显示

ps mac命令:  sudo npm i -g @vue/cli

安装后若出现下列文字，按提示操作即可：

检查vue 版本的命令：vue -V

3.安装vue项目包

在命令窗口输入：vue create 文件名名自取   如下显示：

4.项目包文件介绍

（在vscode中 直接开启 脚手架生成的项目包，能够识别出 并 给出更多代码提示）

5.关于 main.js 文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入才能触发文件中的代码
// 简化: 后缀名.js可以省略,  单纯为了触发,不用起名字
// 所以不需要写 import xxx from xxx 的方式
import './utils/axios'

Vue.config.productionTip = false

// 渲染 App.vue 文件, 到 id=app 的元素里
new Vue({
  // el:"#app",
  router,
  store,
  render: h => h(App),
}).$mount('#app')
// new Vue({配置项}).挂载到('#app')
// $mount 和 el 是同函数的两种写法

6.关于app.js

<template>
  <div>
    <!-- 两种快捷生成方式 -- 前提是装插件 -->
    <!-- <  或 vbase -->
    <!-- 自动格式化: B站视频有介绍 - 小新8022 -->
    <h1>Hello World!</h1>
    <!-- template: 虚拟的包围, 代表此处书写的是HTML代码 -->
    <!-- 严格要求: 只能有一个子元素 -->
    <h2>{{ msg }}</h2>
    <button @click="updateAge">age:{{ age }}</button>
    <h2>年龄翻倍:{{ age_db }}</h2>
  </div>
  <!-- <div></div> -->
</template>

<script>
// 新的模块语法:
// 旧语法:
// 导出: module.exports = {}
// 导入: const xxx = require(文件路径)
//
// 新语法:
// 导出: export default {}
// 导入: import xxx from '文件路径'

export default {
  // 此{}中书写之前 new Vue() 的各种配置项
  // vdata
  // 完整格式  data: function(){ return {} }
  // 此处 data 的值是函数类型, 原因和 组件复用性有关 -- 后期讲
  // 暂时记住是固定用法即可
  data() {
    return {
      msg: 'Welcome To Vue',
      age: 18,
    }
  },
  // vmethod
  methods: {
    updateAge() {
      this.age++
    },
  },
  // 计算属性: 特点 是函数 但是不需要() 就能调用
  computed: {
    age_db() {
      return this.age * 2
    },
  },
}
</script>

<style lang="scss" scoped></style>