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

最新推荐文章于 2025-01-14 06:03:18 发布

愿不曾相遇

最新推荐文章于 2025-01-14 06:03:18 发布

阅读量526

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/Python_cj/article/details/103818024

Vue 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用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 帮助文档