vue的安装指南

vue2

1.首先安装nodejs

从 Node.js 官网下载并安装最新版本的 Node.js。

2.使用淘宝NPM镜像（可选）

【win+r】输入cmd，打开命令行窗口，输入


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

3.项目初始化,安装vue-cli


npm install vue-cli -g      //全局安装 vue-cli

安装完成后，vue-cli文件夹会出现在你自定义的全局路径下。

4.查看vue-cli是否成功，不能检查vue-cli，需要检查vue


vue -v

vue3

1.首先安装nodejs

https://www.yuque.com/tianwen-8blul/scy3iz/igyzztzsrz457el9

2.使用淘宝NPM镜像（可选）

【win+r】输入cmd，打开命令行窗口，输入


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

3.项目初始化,init创建项目


# 最新稳定版
$ npm init vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。
如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。


$ npm init vue@latest
Need to install the following packages:
  create-vue@3.6.1
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework
# 这里需要进行一些配置，项目名输入 runoob-vue3-test，其他默认回车即可
&#x2714; Project name: … runoob-vue3-test
&#x2714; Add TypeScript? … No / Yes
&#x2714; Add JSX Support? … No / Yes
&#x2714; Add Vue Router for Single Page Application development? … No / Yes
&#x2714; Add Pinia for state management? … No / Yes
&#x2714; Add Vitest for Unit Testing? … No / Yes
&#x2714; Add an End-to-End Testing Solution? › No
&#x2714; Add ESLint for code quality? … No / Yes

Scaffolding project in /Users/tianqixin/runoob-test/runoob-vue3/runoob-vue3-test...

Done. Now run:

  cd runoob-vue3-test
  npm install
  npm run dev

4.create创建项目

vue create 命令创建项目语法格式如下：


vue create [options] <app-name>

创建一个由 vue-cli-service 提供支持的新项目：
options 选项可以是：
● -p, --preset <presetName>：忽略提示符并使用已保存的或远程的预设选项
● -d, --default：忽略提示符并使用默认预设选项
● -i, --inlinePreset <json>：忽略提示符并使用内联的 JSON 字符串预设选项
● -m, --packageManager <command>：在安装依赖时使用指定的 npm 客户端
● -r, --registry <url>：在安装依赖时使用指定的 npm registry
● -g, --git [message]：强制 / 跳过 git 初始化，并可选的指定初始化提交信息
● -n, --no-git：跳过 git 初始化
● -f, --force：覆写目标目录可能存在的配置
● -c, --clone：使用 git clone 获取远程预设选项
● -x, --proxy：使用指定的代理创建项目
● -b, --bare：创建项目时省略默认组件中的新手指导信息
● -h, --help：输出使用帮助信息
接下来我们创建 runoob-vue3-app 项目：


vue create runoob-vue3-app

执行以上命令会出现安装选项界面：


Vue CLI v4.4.6
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
  Manually select features

按下回车键后就会进入安装，等候片刻即可完成安装。安装完成后，我们进入项目目录：


cd runoob-vue3-app2
npm run server

5.进入并运行项目


$ cd runoob-vue3-test
$ npm install
$ npm run dev
  VITE v4.3.4  ready in 543 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

6.Vue3 项目打包

打包 Vue 项目使用以下命令：


npm run build

执行完成后，会在 Vue 项目下会生成一个 dist 目录，该目录一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js、css 以及图片目录 images（如果有图片的话）。