[Vue]脚手架创建项目

发布时间 2023-12-10 15:42:12作者: 夕苜19

文档:https://cli.vuejs.org/zh/

(脚手架最新版本是4.x)

 

1. 如果安装速度过慢,可以指到国内安装地址:
npm config set registry https://registry.npm.taobao.org

2. 首次安装(全局):npm install -g @vue/cli

 

3. 切换到创建项目的目录,使用命令创建项目 vue create xxx

4. 选择使用vue的版本、包管理工具

5. 启动项目npm run serve

6. 打包项目npm run build

7. 暂停项目Ctrl+C

 

vue脚手架隐藏了所有的webpack相关的配置,如果想查看具体的webpack配置,请执行 vue inspect > output.js

 

脚手架文件结构

├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ └── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
└── package-lock.json: 包版本控制文件