【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