Vue前端学习-Nodejs安装环境搭建-创建第一个项目_add pinia for state management?-CSDN博客

本文链接：https://blog.csdn.net/tesol_service/article/details/127779414

在官网Node.js 下载Node.js安装包，安装包同时会安装Node.js和npm工具。然后输入命令验证安装是否成功。

配置国内淘宝镜像：npm config set registry https://registry.npm.taobao.org
查看配置的镜像是否成功： npm config get registry

运行以下命令：

npm init vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。

Usage

npm create vue@3

你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

> cd <your-project-name>
> npm install
> npm run dev

你现在应该已经运行起来了你的第一个 Vue 项目！请注意，生成的项目中的示例组件使用的是组合式 API 和 <script setup>，而非选项式 API。

我的完整安装过程：

macbookpro@MacBookdeMacBook-Pro ~ % npm
npm <command>

Usage:

npm install        install all the dependencies in your project
npm install <foo>  add the <foo> dependency to your project
npm test           run this project's tests
npm run <foo>      run the script named <foo>
npm <command> -h   quick help on <command>
npm -l             display usage info for all commands
npm help <term>    search for help on <term>
npm help npm       more involved overview

All commands:

    access, adduser, audit, bin, bugs, cache, ci, completion,
    config, dedupe, deprecate, diff, dist-tag, docs, doctor,
    edit, exec, explain, explore, find-dupes, fund, get, help,
    hook, init, install, install-ci-test, install-test, link,
    ll, login, logout, ls, org, outdated, owner, pack, ping,
    pkg, prefix, profile, prune, publish, query, rebuild, repo,
    restart, root, run-script, search, set, set-script,
    shrinkwrap, star, stars, start, stop, team, test, token,
    uninstall, unpublish, unstar, update, version, view, whoami

Specify configs in the ini-formatted file:
    /Users/macbookpro/.npmrc
or on the command line via: npm <command> --key=value

More configuration info: npm help config
Configuration fields: npm help 7 config

npm@8.19.2 /usr/local/lib/node_modules/npm
macbookpro@MacBookdeMacBook-Pro ~ % npm config set registry https://registry.npm.taobao.org
macbookpro@MacBookdeMacBook-Pro ~ % npm config get registry
https://registry.npm.taobao.org/
macbookpro@MacBookdeMacBook-Pro ~ % 
macbookpro@MacBookdeMacBook-Pro ~ % 
macbookpro@MacBookdeMacBook-Pro ~ % npm init vue@latest
Need to install the following packages:
  create-vue@3.3.4
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

✔ Project name: … vueProject
✔ Package name: … vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes

Scaffolding project in /Users/macbookpro/vueProject...

Done. Now run:

  cd vueProject
  npm install
  npm run dev

npm notice 
npm notice New patch version of npm available! 8.19.2 -> 8.19.3
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.19.3
npm notice Run npm install -g npm@8.19.3 to update!
npm notice 
macbookpro@MacBookdeMacBook-Pro ~ % ls
AndroidWork			Movies
Applications			Music
C++				Pictures
Desktop				Postman
Documents			Public
Downloads			fineagent.jar
IdeaProjects			flutterSDK
Kotlin  学习三剑客		vueProject
Library				备课
macbookpro@MacBookdeMacBook-Pro ~ % cd vueProject
macbookpro@MacBookdeMacBook-Pro vueProject % ls
README.md		package.json		tsconfig.config.json
env.d.ts		public			tsconfig.json
index.html		src			vite.config.ts
macbookpro@MacBookdeMacBook-Pro vueProject % npm install

added 183 packages in 14s
macbookpro@MacBookdeMacBook-Pro vueProject % npm run dev

> vue@0.0.0 dev
> vite


  VITE v3.2.3  ready in 543 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

运行npm run dev 命令之后，会输出一个页面地址。在浏览器中输入： http://localhost:5173/

返回一个Vue页面如下：这就是我们第一个Vue项目界面：

一些注释：

✔ Project name: … vue3_ok  //项目名称
✔ Add TypeScript? … No / Yes  //是否使用TS
✔ Add JSX Support? … No / Yes  //是否支持JSX，除非你是搞React开发
✔ Add Vue Router for Single Page Application development? … No / Yes  //是否添加路由
✔ Add Pinia for state management? … No / Yes   //是否添加状态管理 推荐pinia
✔ Add Vitest for Unit Testing? … No / Yes  //是否添加单元测试
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes  //是否添加端到端测试
✔ Add ESLint for code quality? … No / Yes   //是否添加ESLint做代码质量检查
✔ Add Prettier for code formatting? … No / Yes   //是否添加Perttier进行代码格式化
 
 
 
 
 
  cd vue3_ok   //cd 进行目录
  npm install   //安装相关依赖   npm i
  npm run lint   //运行代码修复
  npm run dev   //运行项目