热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

开发笔记:Vue入门:Vue项目创建及启动

本文由编程笔记#小编为大家整理,主要介绍了Vue入门:Vue项目创建及启动相关的知识,希望对你有一定的参考价值。1.创建Vue项目存放地址
本文由编程笔记#小编为大家整理,主要介绍了Vue入门:Vue项目创建及启动相关的知识,希望对你有一定的参考价值。


1. 创建Vue项目存放地址

用于存放Vue项目,找个自己处理方便的地方。本人地址:D:Program FilesWorkspaceVue

2. 创建项目

进入cmd窗口 进入项目存放地址

执行命令【vue init webpack HelloWorld】创建Vue项目 [HelloWorld]为项目保存文件夹名称

技术图片技术图片?

录入项目名称

技术图片技术图片?

项目描述及作者

技术图片技术图片?

项目构建

选择第一项

技术图片技术图片?

是否使用router

技术图片技术图片?

是否使用ESLint

技术图片技术图片?

是否使用单元测试

技术图片技术图片?

是否使用e2e测试

技术图片技术图片?

项目创建后是否执行安装

选择第一项 是

技术图片技术图片?

创建成功后提示

技术图片技术图片?

4. 启动项目

进入项目根目录下 执行【npm run dev】

技术图片技术图片?

 启动成功后提示

技术图片技术图片?

 访问浏览器

技术图片技术图片?

5. 项目结构说明(不完整)


|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热重载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- src // 源码目录
| |-- components // vue公共组件
| |-- store // vuex的状态管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件,加载各种公共组件
|-- static // 静态文件,比如一些图片,json数据等
| |-- data // 群聊分析得到的数据用于数据可视化
|-- .babelrc // ES6语法编译配置,里面有一些插件,这些插件的作用是代码的转换
|-- .editorconfig // 编译器的配置,定义代码格式
|-- .eslintignore //忽略语法检查的目录文件
|-- .eslintrc.js //编译规则配置文件,规则定制文件,规则编译不过的时候可以在这里配置为0
|-- .gitignore // git上传需要忽略的文件格式,
|-- favicon.ico // link图标
|--.postcssrc.js
|-- index.html // 入口页面
|-- package.json // 项目基本信息如:可以配置script脚本 ^上箭头代表可以安装当前版本及以上的版本
|-- README.md // 项目说明

技术图片

 


推荐阅读
  • Docker安全策略与管理
    本文探讨了Docker的安全挑战、核心安全特性及其管理策略,旨在帮助读者深入理解Docker安全机制,并提供实用的安全管理建议。 ... [详细]
  • 本文介绍如何通过参数化查询来防止SQL注入攻击,确保数据库的安全性。示例代码展示了在C#中使用参数化查询添加学生信息的方法。 ... [详细]
  • 本文介绍了编程语言的基本分类,包括机器语言、汇编语言和高级语言的特点及其优缺点。随后详细讲解了Python解释器的安装与配置方法,并探讨了Python变量的定义、使用及内存管理机制。 ... [详细]
  • RocketMQ 运维监控实践指南
    本文详细介绍了如何实现 RocketMQ 的运维监控,包括监控平台的搭建、常用运维命令及其具体用法。适合对 RocketMQ 监控感兴趣的读者参考。 ... [详细]
  • 如何使用ES6语法编写Webpack配置文件? ... [详细]
  • 本文详细介绍了在 Vue.js 前端框架中集成 vue-i18n 插件以实现多语言支持的方法。通过具体的配置步骤和示例代码,帮助开发者快速掌握如何在项目中实现国际化功能,提升用户体验。同时,文章还探讨了常见的多语言切换问题及解决方案,为开发人员提供了实用的参考。 ... [详细]
  • 本文探讨了如何利用RxJS库在AngularJS应用中实现对用户单击和拖动操作的精确区分,特别是在调整区域大小的场景下。 ... [详细]
  • 本文详细介绍了Oracle 11g中的创建表空间的方法,以及如何设置客户端和服务端的基本配置,包括用户管理、环境变量配置等。 ... [详细]
  • RTThread线程间通信
    线程中通信在裸机编程中,经常会使用全局变量进行功能间的通信,如某些功能可能由于一些操作而改变全局变量的值,另一个功能对此全局变量进行读取& ... [详细]
  • 本文介绍如何在Access VBA中处理参数查询时将整数正确地传递给查询,避免因类型转换导致的数据类型不匹配错误。 ... [详细]
  • centos 7.0 lnmp成功安装过程(很乱)
    下载nginx[rootlocalhostsrc]#wgethttp:nginx.orgdownloadnginx-1.7.9.tar.gz--2015-01-2412:55:2 ... [详细]
  • 在 Vue 应用开发中,页面状态管理和跨页面数据传递是常见需求。本文将详细介绍 Vue Router 提供的两种有效方式,帮助开发者高效地实现页面间的数据交互与状态同步,同时分享一些最佳实践和注意事项。 ... [详细]
  • 这篇文章 | 夕阳下的防火墙命令全解 ... [详细]
  • 理解和应用HTTP请求中的转发与重定向机制
    在HTTP请求处理过程中,客户端发送请求(通常简称为req),服务器进行相应处理后返回响应(通常简称为res)。理解和应用客户端的转发与重定向机制是前端开发的重要内容。这两种机制在Web开发中具有关键作用,能够有效管理和优化用户请求的处理流程。转发机制允许服务器内部将请求传递给另一个资源,而重定向则指示客户端向新的URL发起新的请求,从而实现页面跳转或资源更新。掌握这些技术有助于提升应用的性能和用户体验。 ... [详细]
  • 在GitHub上克隆vue-element-admin项目时遇到依赖安装错误
    在 GitHub 上克隆 vue-element-admin 项目后,使用 `npm install` 安装依赖时遇到了未知的 Git 错误。具体错误信息为 `npm ERR! code 128`,提示命令执行失败。这可能是由于网络问题、Git 配置不正确或某些依赖包的仓库地址无效导致的。建议检查网络连接、更新 Git 版本并确保所有依赖项的 URL 正确无误。 ... [详细]
author-avatar
mobiledu2502871243
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有