【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
