【Vue3】从零开始创建一个VUE项目

相关链接：
【VUE3】【Naive UI】＜NCard＞ 标签
【VUE3】【Naive UI】＜n-button＞ 标签
【VUE3】【Naive UI】＜a＞ 标签
【VUE3】【Naive UI】＜NDropdown＞ 标签
【VUE3】【Naive UI】＜n-upload＞标签
【VUE3】【Naive UI】＜n-message＞标签

手动创建VUE项目

• 步骤 1: 安装 Node.js 和 npm
  首先确保的计算机上已经安装了 Node.js 和 npm（Node 包管理器）。
  你可以通过访问 Node.js 官方网站 下载并安装最新版本。

node -v
npm -v

• 创建一个新的文件夹

mkdir my-naive-ui-project

cd my-naive-ui-project

• 初始化 npm 项目

npm init -y

{// 项目名称，通常与项目文件夹名称一致"name": "learnvue",// 项目的版本号，遵循语义化版本规则"version": "1.0.0",// 指定应用程序的主要入口文件，这里默认为index.js"main": "index.js",// 定义可以运行的脚本命令，例如："test" 脚本用于运行测试"scripts": {"test": "echo \"Error: no test specified\" && exit 1"},// 项目的关键字，有助于他人搜索和发现你的项目"keywords": [],// 项目作者的信息，可填写姓名或邮箱"author": "",// 项目使用的许可证类型，ISC是一种宽松的开源许可证"license": "ISC",// 对项目的简短描述"description": ""
}

此时该目录下出现package.json文件

• 安装 Vue CLI

npm install -g @vue/cli

• 使用 Vue CLI 手动生成项目结构

vue create .

• 运行VUE项目

num run serve.

• 在项目根目录下，安装 Naive UI

npm install naive-ui

• 修改 main.js 或 main.ts 文件，引入 Naive UI

import { createApp } from 'vue'
import App from './App.vue'
import { NConfigProvider, NMessageProvider } from 'naive-ui'const app = createApp(App)app.use(NConfigProvider)
app.use(NMessageProvider)app.mount('#app')

• 在 App.vue 中添加示例代码，并运行项目

npm run serve

附录 package.json文件

{"name": "my-naive-ui-project","version": "1.0.0","private": true,"scripts": {"serve": "vue-cli-service serve", // 启动开发服务器"build": "vue-cli-service build", // 构建生产环境版本"lint": "vue-cli-service lint" // 运行 ESLint 检查},"dependencies": {"core-js": "^3.6.5", // Polyfills for older browsers"vue": "^3.0.0", // Vue 3"naive-ui": "^2.39.0" // Naive UI, a Vue 3 component library},"devDependencies": {"@vue/cli-plugin-babel": "~5.0.0","@vue/cli-plugin-eslint": "~5.0.0","@vue/cli-service": "~5.0.0","@babel/core": "^7.12.10","@babel/eslint-parser": "^7.12.1","@vue/compiler-sfc": "^3.0.0","eslint": "^7.22.0","eslint-plugin-vue": "^7.8.0"},"eslintConfig": {"root": true,"env": {"node": true},"extends": ["plugin:vue/vue3-essential","eslint:recommended"],"parserOptions": {"parser": "@babel/eslint-parser"},"rules": {}},"browserslist": ["> 1%","last 2 versions","not dead"]
}

解释

• scripts：定义了常用的 npm 脚本，包括启动开发服务器、构建项目和运行代码检查。

• dependencies：项目运行所必需的依赖，这里包括了 Vue 3 和 Naive UI。

• devDependencies：开发过程中需要的工具和插件，如 Babel、ESLint 和 Vue CLI 插件。

• eslintConfig：ESLint 的配置，用于设置代码风格和规则。

• browserslist：定义了项目支持的目标浏览器范围。

报错处理: Failed to get response from https://registry.npmjs.org/vue-cli-version-marker

遇到 Failed to get response from https://registry.npmjs.org/vue-cli-version-marker 错误通常是因为网络连接问题或 npm 注册表访问受限。
以下是一些可能的解决方案：

• 方法1：检查网络连接
  确保你的网络连接正常，尝试访问其他网站来确认网络是否通畅。

• 方法2：使用淘宝镜像
  可以通过以下命令临时设置 npm 的注册表为淘宝镜像：
  npm config set registry https://registry.npm.taobao.org
  完成后，如果你想恢复到默认的 npm 注册表，可以运行
  npm config set registry https://registry.npmjs.org

• 方法3：修改 .vuerc 文件
  可以永久地修改 .vuerc 文件来让 Vue CLI 使用淘宝镜像。
  打开 .vuerc 文件（通常位于用户主目录下），找到 useTaobaoRegistry 属性并设置为 true。

{"useTaobaoRegistry": true,// 其他配置...
}
var foo = 'bar';

• 方法4：清除 npm 缓存
  npm cache clean --force