Vue项目创建+项目结构分析

小旺不正经
379 阅读1分钟

这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战

Vue项目创建+项目结构分析

Vue CLI 快速上手

环境要求 Node.js

安装 命令行输入cnpm install -g @vue/cli

image-20211113143659882

image-20211113143903242

输入vue检查安装

image-20211113143946908

创建Vue项目

命令行创建

vue create hello

image-20211113144527888

可以选默认 也可以选手动设置（这里选手动）

image-20211113144652886

上下键移动 空格键打勾 选择好后回车

image-20211113144808210

选择版本

image-20211113144907432

是否用history模式显示路由地址（这里演示选择否）

image-20211113145059611

选择css预处理模式

image-20211113145219348

静态语法检查与格式化

image-20211113145250700

保存时是否检查语法

image-20211113145357841

配置文件选择

image-20211113145603830

创建完成

根据提示启动服务

image-20211113150104113

图形化创建项目

命令行输入vue ui

image-20211113150932162

image-20211113151012740

输入项目名 点击下一步

image-20211113151105605

选择默认配置或手动

image-20211113151150336

点击创建项目即可

项目结构分析

image-20211113152354278

image-20211113152443801

package.json--项目描述文件

vue.config.js--配置文件扩展 （默认情况下不会生成）

src/--源代码

dist/--构建后的代码

public/--公共的静态文件

node_modules/--项目依赖的安装目录

avatar
文章
阅读
粉丝