vue项目搭建流程vue项目完整搭建步骤vue项目搭建




vue项目搭建流程vue项目完整搭建步骤vue项目搭建

2022-07-20 21:31:37 网络知识 官方管理员

简介

为了让一些不太清楚搭建前端项目的小白,更快上手。今天我将一步一步带领你们进行前端项目的搭建。前端开发中需要用到框架,那vue作为三大框架主流之一,在工作中很常用。所以就以vue为例。

安装node

下载并安装node

下载地址为

在nodejs官网下载最新版稳定版的node.js安装,自带了npm工具,推荐下载左边的。

vue项目搭建流程(vue项目完整搭建步骤)(1)

检查node是否安装成功

node-V

vue项目搭建流程(vue项目完整搭建步骤)(2)

安装淘宝镜像

为了更快安装,可以使用淘宝的镜像:http://npm.taobao.org/

在终端输入以下命令:

npminstall-gcnpm–registry=https://registry.npm.taobao.org

vue项目搭建流程(vue项目完整搭建步骤)(3)

检测cnpm是否安装成功

cnpm-V

搭建vue项目环境

全局安装vue-cli

vue-cli是vue脚手架工具,方便打包,部署,测试等。

cnpminstall--globalvue-cli  

vue项目搭建流程(vue项目完整搭建步骤)(4)

使用脚手架初始化vue项目

进入你的项目目录,创建一个基于webpack模板的新项目:vueinitwebpack项目名

vueinitwebpackmy_project

vue项目搭建流程(vue项目完整搭建步骤)(5)

安装依赖

进入项目

cdmy_project

vue项目搭建流程(vue项目完整搭建步骤)(6)

安装依赖

cnpminstall

vue项目搭建流程(vue项目完整搭建步骤)(7)

此时项目中会多了一个node_modules

启动项目

cnpmrundev

vue项目搭建流程(vue项目完整搭建步骤)(8)

启动成功

vue项目搭建流程(vue项目完整搭建步骤)(9)

发表评论:

最近发表
网站分类
标签列表