【Vue3】从零开始创建一个VUE项目
- 手动创建VUE项目
- 附录 package.json文件
- 报错处理: Failed to get response from https://registry.npmjs.org/vue-cli-version-marker
相关链接：
【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
