第 3 章:使用 Vue 脚手架
一、初始化脚手架
1、说明
1、Vue 脚手架是 Vue 官方提供的标准化开发工具(开发平台)。
2、最新的版本是 4.x。
3、文档: https://cli.vuejs.org/zh/。
2、具体步骤
第一步 安装@vue/cli
(仅第一次执行):全局安装@vue/cli。
npm install -g @vue/cli
第二步:创建项目
切换到你要创建项目的目录,然后使用命令创建项目
vue create xxxx
bable :es5 ==> es5
eslint:语法检查
E:\代码\workspace-web\尚学堂代码 λ vue create vue_2022 Vue CLI v5.0.8 ? Please pick a preset: Default ([Vue 3] babel, eslint) > Default ([Vue 2] babel, eslint) Manually select features
Vue CLI v5.0.8 ? Please pick a preset: Default ([Vue 2] babel, eslint) Vue CLI v5.0.8 ✨ Creating project in E:\代码\workspace-web\尚学堂代码\vue_2022. � Initializing git repository... ⚙️ Installing CLI plugins. This might take a while... added 847 packages in 34s npm notice npm notice New minor version of npm available! 8.3.1 -> 8.19.3 npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.19.3 npm notice Run npm install -g npm@8.19.3 to update! npm notice � Invoking generators... � Installing additional dependencies... added 86 packages in 5s ⚓ Running completion hooks... � Generating README.md... � Successfully created project vue_2022. � Get started with the following commands: $ cd vue_2022 $ npm run serve WARN Skipped git commit due to missing username and email in git config, or failed to sign commit. You will need to perform the initial commit yourself.
创建成功
第三步:启动项目
npm run serve
备注:
1、如出现下载缓慢请配置 npm 淘宝镜像:
npm config set registry https://registry.npm.taobao.org
2、Vue 脚手架隐藏了所有 webpack 相关的配置,若想查看具体的 webpakc 配置,请执行:
vue inspect > output.js
3、模板项目的结构
├── 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:包版本控制文件
本文作者:huxingxin
本文链接:https://www.cnblogs.com/huxingxin/articles/16926732.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
分类:
尚硅谷vue学习笔记
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步