从零开始构建一个Vue项目（手脚架）

01.准备工作

1.下载node，可以下载稳定版LTS（.msi文件）可以根据提示直接安装

可以在vscode的终端（查看—终端）中输入node -v、npm -v来检测是否安装成功

2.下载脚手架vue-cli

直接在cmd中输入就好了，“-g”代表全局安装

安装好之后，可以在cmd中输入 vue -V查看是否安装好

02.创建脚手架

在要创建项目的地方打开cmd

（在某一个文件位置打开cmd，可以直接选中路径栏输入cmd）

注意不可以以驼峰命名形式（vueStudy × ），只能以小写或者中划线连接

接下来会让你选择创建Vue3还是Vue2的项目，选择好后项目就创建好了（需要等待一段时间），项目结构如下所示：

在vscode中打开项目，在vscoed终端（查看-终端）中输入npm run serve（或yarn serve）就可以启动cli项目了（通过ctrl+c可以终止），点击链接打开页面

03.vue项目结构

1.页面逻辑

启动服务器之后，首先找到的入口的文件就是main.js（src下的），main.js中会引入App.vue，App.vue在这里相当于一个司令组件，在这里它引入了HelloWorld组件（一个.vue文件有三件套：<template>、<script>、<style>）

插入一个组件的顺序（引入——注册——插入）

HelloWorld.vue 是Vue脚手架创建时候给我们的一个简单的样例组件，我们点击链接看到的内容就是在这个组件中写的，之后编写vue页面的时候也主要是用这样的组件化流程

2.package.json

package.json文件中定义了这个项目所需要的各种模块，以及项目的配置信息，npm install 命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境（所以比如从github上拉取一个vue项目，会发现是没有node_modules这个文件夹的，运行npm install之后会帮你都配置好）

dependencies是项目的依赖，devDependencies是开发环境的项目依赖，项目依赖都放在node_modules中，比如element-ui就可以下载到依赖里面

public和assets

public和assets都是用来放置静态资源的地方，要知道vue项目编译之后项目结构会变化

1、assets：通过相对路径引用，会被 webpack 处理，可以使用如下方式引用

background-image: url("./assets/ouputImg.png");

// 点和@作用是一样的

background-image: url("@/assets/ouputImg.png");

在编译的时候会自动加上require

2、public： 通过绝对路径引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理

this.loadNodeDataFromFile(“${this.compareActionFileName}.txt”).then(……)

不使用相对路径，直接使用 “fileName”或“/fileName”就可以获取到