vue创建项目步骤和配置环境

最新推荐文章于 2025-10-14 13:42:43 发布

原创最新推荐文章于 2025-10-14 13:42:43 发布 · 809 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#npm #前端 #vue #git

笔记专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Vue项目的创建步骤和配置环境，包括环境配置、vue-cli安装、项目创建、依赖安装（开发依赖与运行依赖）以及Element-UI的安装和使用。通过这些步骤，你可以快速地搭建起一个Vue项目并开始开发。

vue创建项目步骤和配置环境

1.准备工作-环境配置

1.在创建项目之前,一定要确保你已经安装了node.js , 如果还没有安装，没有配置npm全局环境变量，需要先去官网下载安装。

2.npm是一个包管理工具，在我们安装node.js之后，自动拥有包管理功能。

npm -v      //可以查看版本号
node -v     //node版本

3.由于国内用npm安装第三方依赖时，下载速度较慢，所以建议安装淘宝镜像。

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

2.vue-cli脚手架安装

vue-cli是一个“命令行工具”，辅助我们开发的工具，且本质上是一个npm包，也需要通过npm安装下载。

npm i -g @vue/cli   //全局安装vue-cli

如果项目需要用到2.0版本功能就要加个补丁：

npm install -g @vue/cli-init    //补全2.0版本功能

3.创建项目

4.0版本创建：

 1. vue create 项目名称    //初始化、创建
 2. cd 项目名称             //打开项目
 3. npm run serve    //启动项目

2.0版本创建步骤：

1.  vue init webpack-simple 项目名称   //初始化、创建
2. cd 项目名称       //打开
3. npm install      //下载相关依赖
4. npm run dev     //启动项目

4.安装需要的依赖

依赖分为两种：
(1)开发式依赖：指在开发调试期间为我们提供帮助的依赖，如脚手架/webpack/代码辅助工具等，开发式依赖的包存于devDependencies。

(2)运行式依赖：项目上线，依然需要在项目中使用的，叫做运行式依赖，
运行式依赖的包存于dependencies。

 安装：
   npm i 包名
   npm i 包名 -S (或npm i 包名 --save)  //表示装到运行时依赖

5.element-ui的安装和使用

1.安装：

npm i element-ui -S     //安装到运行式依赖

到main.js中引入element-ui

import ElementUi from 'element-ui'  //引入element-ui，ElementUi是名称
import 'element-ui/lib/theme-chalk/index.css'  //引入样式文件
Vue.use(ElementUi)   //全局注册ElementUi

到这里一个项目就基本搭建就完成了，接下来快去大展身手吧！

（ 这些是本人的一些经验分享，希望对你有所帮助，有错误一定要告诉我。 ——尼古拉斯·小白）