一、环境准备

1、安装node.js

下载地址：https://nodejs.org/en/

D:\vue3>node -v
v16.17.0
D:\vue3>npm -v
8.15.0

npm会随着node.js一起安装，所以，只要是node.js正常安装，就代表npm已经安装。检测方式：cmd命令窗口输入 npm -v 回车，能正常显示npm版本。

二、安装vue脚手架：Vue CLI 

下载地址：https://cli.vuejs.org/zh/

官方文档说明

npm install -g @vue/cli # 原生npm的下载速度太慢，各种报错。因此，使用淘宝镜像来安装
npm install -g @vue/cli --registry=https://registry.npm.taobao.org 
# OR
yarn global add @vue/cli

 

 安装完成

D:\vue3\st02>vue -V
@vue/cli 5.0.8

创建项目

D:\vue3>vue create st02
?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npmmirror.com for faster installation? Yes


Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint)
......
 $ cd st02
 $ npm run serve


D:\vue3>

　　你也可以通过 vue ui 命令以图形化界面创建和管理项目：

目录说明

java vue 下载列表功能_配置文件

 

 

目录/文件

说明

build

项目构建(webpack)相关代码

config

配置目录，包括端口号等。我们初学可以使用默认的。

node_modules

npm 加载的项目依赖模块

src

这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

  • assets: 放置一些图片，如logo等。
  • components: 目录里面放了一个组件文件，可以不用。
  • App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
  • main.js: 项目的核心文件。
  • index.css: 样式文件。

jsconfig.json

目录中存在tsconfig.json文件表明该目录是 TypeScript 项目的根目录。该tsconfig.json文件指定编译项目所需的根文件和编译器选项。
JavaScript 项目可以使用jsconfig.json文件来代替，它的作用几乎相同，但默认启用了一些与 JavaScript 相关的编译器标志。

package-lock.json

简单理解就是锁定dependencies的版本号
^：锁定大版本号，比如是^6.2.2，会匹配所有6.x.x的版本，更新的时候会下载最新的版本号
~：锁定前面两个版本号，比如是^6.2.2，会匹配所有6.2.x的版本，更新的时候会下载最新的版本号
*：安装最新的版本号。

vue.config.js

一个可选的配置文件

static

静态资源目录，如图片、字体等。

public

公共资源目录。该文件夹用来存放静态资源，不会被打包影响，会原封不动的输出到dist目录中

test

初始测试目录，可删除

.xxxx文件

这些是一些配置文件，包括语法配置，git配置等。

index.html

首页入口文件，你可以添加一些 meta 信息或统计代码啥的。

package.json

项目配置文件。

README.md

项目的说明文档，markdown 格式

dist

使用 npm run build 命令打包后会生成该目录。

运行项目

D:\vue3\st02>  npm run serve 
DONE  Compiled successfully in 4373ms                                                                          15:24:51


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.85.134:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

访问：http://localhost:8080/

java vue 下载列表功能_配置文件_02