Vue CLI安装，前端项目搭建

小熊学习日记

已于 2023-07-10 12:40:33 修改

阅读量118

点赞数

文章标签： vue.js webpack npm

于 2023-04-28 12:48:13 首次发布

本文链接：https://blog.csdn.net/qq_45668618/article/details/130400453

版权

官网: http://nodejs.cn/download/
在这里插入图片描述
双击安装包，选择安装路径，其他默认即可。

默认情况下自动安装Node和NPM

//查看node版本
node -v

//查看npm版本
npm -v

在这里插入图片描述

1、创建文件夹node_global和node_cache

2、命令行窗口编辑

npm config set prefix "node_global路径"

npm config set cache "node_cache路径"

npm config set registry https://registry.npm.taobao.org

在这里插入图片描述

3、修改环境变量
在这里插入图片描述

npm install webpack@4.41.5 -g

npm install webpack-cli@3.3.10 -g

webpack -v

在这里插入图片描述

npm install -g @vue/cli

vue --version

在这里插入图片描述

C:\Windows\system32>d:

D:\>cd D:\Project\IdeaProjects\iqiyi

D:\Project\IdeaProjects\iqiyi>vue create iqiyifront

在这里插入图片描述

// 安装
npm install
// 编译
npm run build
// 部署、运行
npm run serve

找到启动文件main.js，首页App.vue

1、集成element-ui

//安装组件element-ui
npm i element-ui -S

在这里插入图片描述

main.js文件

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// 控件大小设置为mini,也可根据自己情况设置，或不设置
Vue.use(ElementUI,{size:"mini"});

在这里插入图片描述


//安装组件，可以上网，访问后端项目的接口
npm install axios -S

关注