安装Node.js和npm。
首先，新版的Node.js中包含npm，只需要安装Node.js即可。
具体的安装教程可以百度(考虑到大部分同学的开发环境是Windows，而Windows的安装比较简单，下载安装包按照提示安装即可)。
安装完成后，检查一下是否安装成功。打开命令行(cmd)，输入

• 检查Node.js版本

  node -v
  

• 检查npm版本

  npm -v
  

如果无法显示版本号，可能是环境变量配置等问题(很常见了)，同样的，因为不是今天分享的重点，所以如果出现这样的问题可以百度解决。

关于npm换源

• 一种方法是每次使用npm install命令时，在后面加参数使用淘宝源，即

  npm install <packageName> --registry=https://registry.npm.taobao.org
  

• 另一种方法是安装cpnm

  npm install -g cnpm --registry=https://registry.npm.taobao.org
  

之后使用cpnm命令(本质也是淘宝还原)，即

cnpm install <packageName>

方便起见，后面的命令都用npm，但你可以自行选择是否换源、用哪种换源方式。

Vue和Vue CLI的区别

• Vue全称是Vue.js，是一套用于构建用户界面的渐进式JavaScript框架。
• Vue CLI是一个脚手架，通俗地说，Vue CLI = Vue + JS plugins。Vue CLI是代码生成器，可以快速生成一套基于Vue完整的前端框架，单独编译，单独部署；可以再集成各种第三方插件，扩展出更多的功能。
• 对应关系

  Vue CLI版本	Vue版本
  < 4.5	Vue 2
  >= 4.5	Vue 2/Vue 3

安装Vue CLI
至于为什么不安装Vue后面解释
用npm或cnpm安装某个版本的Vue CLI。

npm install -g @vue/cli@3.11.0

检查是否安装成功

vue -V

新建项目

vue init webpack <projectName>

自选项

安装依赖
如果上一步没有选择自动安装依赖，需要自行运行

npm install

工具推荐

• 编辑器：VS Code。轻量化，适合写前端页面。
• 扩展：Vetur。Vue代码高亮(包括HTML、CSS、JS)，npm脚本可视化等。

目录结构

目录结构

src子目录如下

image.png

运行项目

cd demo
npm run dev

主页

学会路由跳转
在src/router目录下的index.js文件中添加

{
  path: '/tutorial',
  name: '从零开始搭建Vue项目',
  component: () => import('@/views/tutorial/index'),
},

同时，在src目录下新建views文件夹，下面新建tutorial文件夹，下面新建index.vue文件。

image.png

<template>
<div>
  <h1>从零构建Vue项目</h1>
</div>
</template>

<script>
export default {};
</script>

<style>
</style>

这样，我们就新建了一个页面，这个页面的内容是“从零构建Vue项目”，这个页面的路由是/tutorial，这个页面对应的文件在src/views/tutorial/index.vue。但是用户如何访问到这个页面呢？显然不能改地址。在HelloWord.vue(我们发现主页页面在这里)中添加一个路由链接

<router-link to="/tutorial">从零开始搭建Vue项目</router-link>

其中，to参数后面是跳转目标的路由，加/表示从根路由开始，不加/表示从当前路由开始(后面会演示)。刷新主页，变成了

主页.png

新建页.png

Vue文件结构

接下来对页面进行一些扩充，来理解三个部分的作用。
添加一个按钮

<button>+1</button>

前端页面的“内容”就放在template中，相当于我们告诉Vue框架，这个页面有两个内容，先是一个标题，标题叫“从零构建Vue项目”；然后是一个按钮，按钮文字是“+1”。
但是，如果我们想让这个按钮变成蓝色呢？在按钮上添加类，然后再style模块编写类的具体内容。

<button class="my-button">+1</button>

.my-button {
  background-color: blue;
}

看看效果

修改前

修改后

<button class="my-button">{{ buttonText }}</button>

data() {
  return {
    buttonText: "+1",
  };
},

这意味着我们可以动态的绑定“内容”中的数据，如果在操作中修改了变量，那么页面展示的内容也会改变

<span>功德</span>
<input :value="count"/>
<button class="my-button" @click="handleClick">+1</button>

methods: {
  handleClick() {
    this.count += 1;
  },
},

我们在旁边再添加一个数据count。这里涉及到vue的一个缩写，@click等价于v-on:click，意为监听点击事件的函数。然后在scipt里的methods中编写对应函数——这就是所谓“数据与操作”中的“操作”。看下效果

每次点击+1

前后端连接
实际上，目前为止还停留在前端界面的开发。实际开发中一定是需要和后端的数据库进行交互的。
什么叫“前后端分离”？什么叫“前后端不分离”(django)？简而言之，就是前端只需要知道和后端交互的接口，而不管后端开发的逻辑，双方通过约定好的数据格式交互(一般为json文件)。这样的好处是利于团队开发。
Vue常用的交互插件为axios。安装

npm install axios

使用

import axios from "axios";

export default {
  created() {
    axios({
      method: "get",
      url: "http://jsonplaceholder.typicode.com/posts",
    }).then((response) => {
      console.log(response);
    });
  },
};

控制台数据

后端返回

发现：任何语言，哪怕换了框架都可以！

结语

恭喜你

实际上，了解了基本原理，任何复杂的架构都是再次基础上建立的。
需要学习的内容

trick

• 控制台调试：请求、元素与样式、日志
• Rester/postman: 请求