vue3+ElementUI-win10搭建

若行若冲

已于 2022-04-20 19:16:07 修改

阅读量1.9k

点赞数 2

分类专栏：编码和工作文章标签： vue 前端 elementUI

于 2022-04-08 11:06:06 首次发布

本文链接：https://blog.csdn.net/coolhe21cn/article/details/124036304

版权

编码和工作专栏收录该内容

20 篇文章 2 订阅

订阅专栏

文章目录

1. 安装node.js

1.1 下载和安装

说明：安装node.js的windows版本后，会自动安装好node以及包管理工具npm，我们后续的安装将依赖npm工具。

node.js的官方地址为：https://nodejs.org/en/download/，如下图所示：
请添加图片描述
或者安装旧版本
在这里插入图片描述

根据自己电脑的具体配置，选择你要下载的安装包，作者选择的是windows 64bit。
下载完毕，按照windows一般应用程序，一路next就可以安装成功

注意：建议不要安装在系统盘（如C：）。

注释：以下命令使用命令提示符（管理员）权限,win10 对user权限的限制了访问权限。
node -v 查看node版本
npm -v 查看npm版本
where node 查看node安装位置

本实验用的是 node-v14.19.1-x64.msi

D:\Program Files\nodejs>npm -v
6.14.16

D:\Program Files\nodejs>node -v
v14.19.1

1.2 配置node.js

目的说明：设置路径能够把通过npm安装的模块集中在一起，便于管理。

在nodejs的安装目录下，新建node_global和node_cache两个文件夹，作者的安装目录为“D:\Program Files\nodejs\”
设置global和cache，设置成功后，后续用命令 npm install XXX -g 安装以后模块就在 D:\Program Files\nodejs\node_global\node_modules里

mkdir “D:\Program Files\nodejs\node_global”
mkdir “D:\Program Files\nodejs\node_cache"
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

1.3 安装cnpm

说明：由于许多npm包都是在国外，配置国内淘宝镜像，安装“中国的npm”——cnpm

参考网址如下：http://npm.taobao.org/

安装命令为：

npm install -g cnpm --registry=https://registry.npm.taobao.org

后续包安装命令 npm 可改为 cnpm

问题：

D:\Program Files\nodejs>npm install -g cnpm --registry=https://registry.npm.taobao.org
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
D:\Program Files\nodejs\node_global\cnpm -> D:\Program Files\nodejs\node_global\node_modules\cnpm\bin\cnpm
+ cnpm@7.1.1
added 844 packages from 976 contributors in 44.772s

在这里插入图片描述

解决：

升级命令：npm update -d
在这里插入图片描述

1.4 设置环境变量（重要!!!）

说明：设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径

1、鼠标右键"此电脑"，选择“属性”菜单，在弹出的“系统”对话框中左侧选择“高级系统设置”，弹出“系统属性”对话框。

在这里插入图片描述

2、配置环境变量：

修改系统变量PATH。在变量 PATH 添加 “D:\Program Files\nodejs\node_global”
新增系统变量NODE_PATH = D:\Program Files\nodejs\node_global\node_modules

1.5 安装 vue 和 vue-cli

“以管理员身份运行” 打开cmd，执行以下命令，安装后如下图：

cnpm install vue -g
cnpm install vue-cli -g

在这里插入图片描述

2. 创建vite项目(vue-ts）

1.1 创建vite-app (vue-ts）

在这里插入图片描述

注意：powershell 选择 vue-ts 时，由于颜色问题，会看不清楚，需要调色。

1.2 用vscode打开vite-app

安装vite-app依赖，PS F:\vuews\vuedemo1\vite-app> npm install
启动dev, npm run dev

#  package.json文件 相关说明
{
"scripts": {	
    "dev": "vite",								// 启动开发服务器， 别名 'vite dev', 'vite serve'
    "build": "vue-tsc --noEmit && vite build",	// 为生产环境构建产物
    "preview": "vite preview"					// 本地预览生产构建产物
  },
}

在这里插入图片描述

3. 创建vite项目(vue）

3.1 创建 my-vue-app (vue）

命令快速生成一个使用 Vite 构建的 Vue 3 项目模版

npm init @vitejs/app my-vue-app --template vue

3.2 引入 Element Plus UI 组件库

开发项目，首先要挑选一个 UI 组件库。目前市面上支持 Vue 3 的组件库并不多，Element UI 不负众望已经完成支持了。Element Plus 是饿了么 Element UI 团队推出的适配了 Vue 3 的全新版本，新增了很多实用组件，体验非常好。

# 1. Vite 工程引入 Element Plus，引入后在 node_modules 中可以看到 @element-plus
npm i element-plus

# 2. 然后修改项目入口文件 main.js，引入 Element Plus 库和相关样式文件
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import '../node_modules/element-plus/theme-chalk/index.css'
createApp(App).use(ElementPlus).mount('#app')

# 重新启动项目，就可以使用 Element Plus 了。修改 App.vue 文件，新增几个 Button
# 最后效果如下图
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite" />

  <div>
    <h3> Element3 UI - PLUS </h3>
    <el-button> 默认按钮 </el-button>
    <el-button type="primary"> 主要按钮 </el-button>
    <el-button type="success"> 成功按钮 </el-button>
    <el-button type="info"> 信息按钮 </el-button>
    <el-button type="warning"> 警告按钮 </el-button>
    <el-button type="danger"> 危险按钮 </el-button>    
  </div>
</template>

在这里插入图片描述

附录

1.1 解决cmd乱码

# 打开cmd，在命令行输入chcp， “936”代表的意思就是 GBK (汉字内码扩展规范)，通常情况下GBK也是cmd的默认编码。
D:\Program Files\nodejs>chcp
活动代码页: 936

# 修改成utf-8，cmd窗口执行如下命令
chcp 65001
Active code page: 65001
D:\Program Files\nodejs>

1.2 解决vscode中问题

cannot be compiled under ‘–isolatedModules’ because it is considered

在这里插入图片描述

解决方法：找到 tsconfig.json 文件，把 “isolatedModules”: true, 改为 false, 问题解决。

1.3 错误解决

在这里插入图片描述

# 解决办法：查看npm config list,下图红色存在空格造成

cache "E:\\Program Files\\nodejs\\node_cache"
prefix "E:\\Program Files\\nodejs\\node_cache"

#解决：去掉空格，重新设置
npm config set cache "E:\\ProgramFiles\\nodejs\\node_cache"
npm config set prefix"E:\\ProgramFiles\\nodejs\\node_global"