Vue脚手架的安装教程以及成功之后对目录结构的相关解析

本文详细介绍了如何使用Vue脚手架搭建项目,包括安装Node.js、配置下载源、安装Vue CLI、创建工程及选择预设和特性。同时,深入解析了Vue项目的目录结构,如src、public、components等关键目录的作用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue脚手架
安装node下载软件 一路默认安装(配置环境变量)
修改下载源 npm config set registry http://registry.npm.taobao.org/
安装vue npm install -g @vue/cli

创建工程 vue create vue-demo

一、please pick preset 选择预设
default 默认
Manualy 手动
二、 Check the features needed for your project: 为工程选择特性
选 babel、 router、vuex、 css-process
Bable 将 ES6 转 ES5 为了 浏览器能识别
TypeScript 更高级的js, js的超级, 添加了面向对象的实现
PWA 原生的移动端支持
Router 路由网址
VUEX 组件传参
CSS Pre-processors CSS 的预处理器
Linter / Formatter 语法检查器
Unit Testing 端端测试

三、 Use history mode for router? 使用history 模式路由
选择 N

History 特点: 在路由中没有#号
Hash 模式: 路由中有#号, 只刷新后面内容

四、Pick a CSS pre-processor 选择css预处理器
Less 是 CSS的预处理工具

五、 Where do you prefer placing config for Babel, ESLint, etc 模块配置放在那儿
In package.json

六、 Save this as a preset for future projects? 是不是要保存预设

N 新手建议不保存

安装成功之后会有两行蓝色提示

首先输入cd py1911-demo
其次输入 npm run serve
成功之后就可以在浏览器输入 http://localhost:8080/#/


以上是vue脚手架的安装


以下是vue脚手架的目录结构

Node_modules 安装了 1109 个js模块 以后安装的模块也会放到这里,不需要关注
Public 此处存放静态资源
Favicon.ico
Index.html 页面入口
Src 编写代码的地方

	Assets 资源  可以存放图片等静态资源
	Components 组件  在其中编写组件
				 三部分 template 内部编写Html
						Script  内部编写Js代码
						Style 内部编写Css样式**
	Router 路由网址
	Store 数据状态管理器,用于组件传参
	views 视图  页面

App.vue 主组件入口
Main.js 主逻辑入口

.gitignore git 工具忽略列表
babel.config Babel 的配置文件(ES6 转 ES5 参考)
package.json 项目工具的配置信息
package-lock 1109个包相互依赖关系
README.md 帮助文档

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值