Vue项目开发流程

本文详细介绍了如何在Windows系统中安装Node.js,配置npm全局路径,切换淘宝镜像加速下载,并使用vue-cli创建和管理Vue2.x项目,包括项目结构、关键配置文件及其作用和运行项目的步骤。
摘要由CSDN通过智能技术生成

nodejs的安装

nodejs下载

*配置npm全局安装路径
npm config set prefix "D:\nodejs"
设置成功  npm config get prefix 能获取到路径

*切换npm淘宝镜像 加速资源下载
npm config set registry https://registry.npm.taobao.org

*安装vue-cli
npm install -g @vue/cli
安装成功
vue --version

创建vue项目

简单创建项目,需要创建文件夹位置打开 vue ui
创建项目–项目名–包管理器(npm)–下一步–手动模版–Router–vue版本2.X–语法检测规范(第一个)

vue项目结构

node_modules //依赖
public //静态文件
src //项目源代码 -assets静态资源 --components 可重用的组件 --router路由配置 --views视图组件(页面) --APP.vue入口页面(根组件) --main.js 入口js文件
packge.json//模块的基本信息,项目开发所需要的模块,版本信息。
vue.config.json//保存vue的配置文件,如代理 端口配置等等。

运行项目

找到packge.json位置 npm run serve
修改端口 vue.config.json

devServer:{
	port:7000,
}

APP.vue

<template></template> 模版部分 生成html代码
<script></script> 控制模版的数据来源和行为
<style></style> css样式
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值