怎么自己做音乐网站,企业微网站,交互设计要学什么,网站开发的功能需求怎么写一.安装与配置npm
1.下载安装Node.js
安装Node.js
下载地址#xff1a;
Node.js — 在任何地方运行 JavaScript (nodejs.org)或下载 | Node.js 中文网 下载后一步步安装就好#xff08;安装过程基本一路直接“NEXT”就可以了#xff0c;直到Finished#xff09;#x…一.安装与配置npm
1.下载安装Node.js
安装Node.js
下载地址
Node.js — 在任何地方运行 JavaScript (nodejs.org)或下载 | Node.js 中文网 下载后一步步安装就好安装过程基本一路直接“NEXT”就可以了直到Finished我之前已经安装了详细步骤大家可以百度npm安装或Node.js安装npm安装-详细教程-CSDN博客
Node.js会自动安装npm 2.查看是否安装成功
按键winR,然后输入cmd打开命令窗口输入node -v 和 npm -v 3.配置npm
3.1 配置npm的全局模块的存放路径以及cache的路径
在你想存放的地址创建2个文件夹我的如下 使用管理员身份打开cmd命令行命令窗口输入以下命令配置
npm config set prefix D:\Node\Libnpm config set cache D:\Node\Cache 通过 命令npm config list 查看配置 3.2 设置环境变量PATH 3.3 配置镜像站
命令行输入 npm config set registryhttps://registry.npm.taobao.org
查看输入 npm config get registry PS:可以安装nrm 管理快速切换安装的前提是先配置好上面的镜像地址
命令行输入 npm install -g nrm 进行安装
安装后可通过以下命令使用
nrm lsnrm use registry_name 3.4 安装cnpm
输入命令npm install -g cnpm --registryhttps://registry.npm.taobao.org
或 npm install cnpm -g
进行安装
输入命令cnpm -v 查看
二、安装Vue-cli
输入命令npm install vue/cli -g
安装有点慢需要等待
输入命令vue -V 查看 三、创建Vue 3项目
整个文件路径不能有中文和空格
1. 打开VScode,选择打开文件夹
就是你的项目代码要放的地方 2.打开终端创建项目
按 ctrl J 打开终端窗口输入命令vue create 项目名称回车创建项目 项目配置如下 出现如下信息就是成功啦 按照他的提示命令输入启动项目 点击他提示的链接或者浏览器输入地址就可以看到界面啦 四.安装与引入Element Plus 按需
因为我后面用到了他的组件所以需要安装不用的可以不安装
官方说明快速开始 | Element Plus (element-plus.org)
组件用法Element Plus (element-plus.org)
1.安装Element Plus
新建一个终端进入项目的文件夹然后输入命令进行安装npm install element-plus --save 2. 引入
选项一完整引入本demo选择此方案
如果你对打包后的文件大小不是很在乎那么使用完整导入会更方便
修改main.ts文件
//增加引入
import ElementPlus from element-plus
import element-plus/dist/index.css//让创建的app使用
app.use(ElementPlus)
完整的main.ts文件如下
import { createApp } from vue
import App from ./App.vue
import router from ./router
import store from ./store
import ElementPlus from element-plus
import element-plus/dist/index.csscreateApp(App).use(ElementPlus).use(store).use(router).mount(#app)选项二按需导入
需要使用额外的插件来导入要使用的组件有2个选择
方案一自动导入
进入项目的文件夹然后输入命令进行安装npm install -D unplugin-vue-components unplugin-auto-import
然后配置在webpack.config.js加入如下代码
const AutoImport require(unplugin-auto-import/webpack)
const Components require(unplugin-vue-components/webpack)
const { ElementPlusResolver } require(unplugin-vue-components/resolvers)module.exports {// ...plugins: [AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
}
方案二手动导入
需要安装 unplugin-element-plus 来导入样式。 配置文档参考 docs 3.检验使用
在HomeView.vue加入下方代码 div classmb-4el-buttonDefault/el-buttonel-button typeprimaryPrimary/el-buttonel-button typesuccessSuccess/el-buttonel-button typeinfoInfo/el-buttonel-button typewarningWarning/el-buttonel-button typedangerDanger/el-button
/div
代码插入位置 刷新网页查看效果
