[笔记]vue从入门到入坟《五》vue-cli构建vue webpack项目

简介: [笔记]vue从入门到入坟《五》vue-cli构建vue webpack项目

参考:

用vue-cli搭建vue项目

vue-cli 项目结构目录简介

前言

一、Vue-cli介绍

官网

简单地说就是构建vue项目的工具包,通过vue-cli会自动构建vue项目的结构。

二、开始

2.0 下载安装npm 以及git

npm安装

npm(Nodejs软件包管理工具)

官网下载地址

下载后双击安装即可

git安装

下载地址

安装git后 右键鼠标会发现git bash

后面的npm 可以在gitbash中输入命令行

2.1 全局安装 vue-cli

安装vue-cli(vue2)

npm install --global vue-cli
• 1

安装vue-cli(vue3)

npm install -g @vue/cli
• 1

2.2 创建项目

创建名为test的项目

vue init webpack test
• 1

注意:没说明的直接回车选择默认就好

“Project name”:这个是项目名称,默认是输入时的那个名称,想改的话直接输入修改,也可以直接回车

“Install vue-router”:是否需要vue-router,这里默认选择使用,这样生成好的项目就会有相关的路由配置文件

“Use ESLint to lint your code”:是否使用ESLint,刚才说了我们这个项目需要使用所以也是直接回车,默认使用,这样会生成相关的ESLint配置

“Setup unit tests with Karma + Moch?”: 是否安装单元测试。由于我们现在还没有单元测试,所以这里选择的是”N”,而不是直接回车哦

“Setup e2e tests with Nightwatch”:是否安装e2e测试,这里我也同样选择的是“N” 这几个配置选择yes 或者 no 对于我们项目最大的影响就是,如果选择了yes 则生成的项目会自动有相关的配置,有一些loader我们就要配套下载。

所以如果我们确定不用的话最好不要yes,要么下一步要下很多没有用的loader

目录介绍

创建完后 用hbuilder打开就是如下图的目录结构:

三、常见问题

Error: Cannot find module ‘@dcloudio/uni-cli-i18n’

总结

简单地介绍vue-cli项目的构建,以便使用hbuilder。

相关文章
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
1251 1
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
1231 4
|
JavaScript 前端开发 C#
从入门到放弃,我们为何从 Blazor 回到 Vue
【10月更文挑战第29天】在前端开发中,许多开发者从尝试新技术 Blazor 最终回到熟悉的 Vue。主要原因包括:1) Blazor 学习曲线陡峭,Vue 上手容易;2) Vue 开发工具成熟,开发效率高;3) Vue 性能优异,优化简单;4) Vue 社区庞大,生态丰富;5) 项目需求和团队协作更适配 Vue。选择技术栈需综合考虑多方面因素。
1700 0
|
资源调度 JavaScript 前端开发
vue3第一章基础:创建Vue3.0工程,包括使用vue-cli 创建、使用 vite 创建
vue3第一章基础:创建Vue3.0工程,包括使用vue-cli 创建、使用 vite 创建
528 5
|
JavaScript 前端开发 UED
Vue 组件设计:构建生动多彩的树形结构组件
本文介绍了如何使用 Vue 构建一个功能强大的树形结构组件。该组件支持递归渲染节点及其子节点,提供了自定义节点颜色、文本和布局的功能。通过独特的样式处理不同层级的节点,展示出丰富的视觉效果。组件还支持动态布局和缩放,确保灵活的界面展示和用户体验。文章提供了详细的代码实现,包括 HTML、JavaScript 和 SCSS,帮助开发者快速集成和定制自己的树形结构组件。
1461 0
Vue 组件设计:构建生动多彩的树形结构组件
|
监控 JavaScript 前端开发
深入了解Vue.js:构建现代前端应用的利器
【10月更文挑战第11天】深入了解Vue.js:构建现代前端应用的利器
207 0
|
存储 JavaScript 前端开发
深入探索 Vue.js:构建现代 Web 应用的利器
【10月更文挑战第11天】深入探索 Vue.js:构建现代 Web 应用的利器
244 1
|
JavaScript 前端开发 网络架构
如何使用Vue.js构建响应式Web应用
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用
|
JavaScript 前端开发
如何使用Vue.js构建响应式Web应用程序
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用程序
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战