[笔记]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。

相关文章
|
4月前
|
JavaScript 前端开发 C#
从入门到放弃,我们为何从 Blazor 回到 Vue
【10月更文挑战第29天】在前端开发中,许多开发者从尝试新技术 Blazor 最终回到熟悉的 Vue。主要原因包括:1) Blazor 学习曲线陡峭,Vue 上手容易;2) Vue 开发工具成熟,开发效率高;3) Vue 性能优异,优化简单;4) Vue 社区庞大,生态丰富;5) 项目需求和团队协作更适配 Vue。选择技术栈需综合考虑多方面因素。
234 0
|
4月前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
4月前
|
JavaScript API 开发者
十分钟 带你强势入门 vue3
十分钟 带你强势入门 vue3
79 1
|
4月前
|
JavaScript
webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
这篇文章是关于如何在webpack环境中配置Vue.js,包括安装Vue.js、解决报错、理解el与template的区别、使用SPA模式、抽离模板为对象、封装为单独的js文件、安装vue-loader时遇到的问题及解决方案,以及整个过程的总结。
130 2
webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
|
4月前
|
JavaScript
vue3完整教程从入门到精通(新人必学2,搭建项目)
本文介绍了如何在Vue 3项目中安装并验证Element Plus UI框架,包括使用npm安装Element Plus、在main.js中引入并使用该框架,以及在App.vue中添加一个按钮组件来测试Element Plus是否成功安装。
145 0
vue3完整教程从入门到精通(新人必学2,搭建项目)
|
4月前
|
JavaScript Java CDN
vue3完整教程从入门到精通(新人必学1,vue3快速上手)
本文提供了Vue 3从入门到精通的完整教程,涵盖了创建Vue应用、通过CDN使用Vue、定义网站以及使用ES模块构建版本的步骤和示例代码。
1708 0
vue3完整教程从入门到精通(新人必学1,vue3快速上手)
|
5月前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
264 5
一小时入门Vue.js前端开发
|
5月前
|
缓存 JSON 前端开发
webpack入门核心知识还看不过瘾?速来围观万字入门进阶知识
该文章深入探讨了Webpack的高级配置与使用技巧,包括Tree Shaking、开发与生产环境的配置差异、代码分割策略、预加载与预取技术的应用等方面的内容。
|
5月前
|
JSON 前端开发 JavaScript
不会webpack的前端可能是捡来的,万字总结webpack的超入门核心知识
该文章提供了Webpack的基础入门指南,涵盖安装配置、基本使用、加载器(Loaders)、插件(Plugins)的应用,以及如何通过Webpack优化前端项目的打包构建流程。
不会webpack的前端可能是捡来的,万字总结webpack的超入门核心知识
|
5月前
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境,包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件,并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
371 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)

热门文章

最新文章