1. 创建Vue项目存放地址

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

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                        // 项目说明

转载于:https://www.cnblogs.com/LFBlog/p/10740496.html

Vue入门:Vue项目创建及启动相关推荐

  1. Vue 移动端项目创建

    前言 移动端我们一般通过Vue脚手架手动自定义创建项目, 只需要Node环境我们就可以通过npm下载Vue脚手架,通过命令创建项目. npm下载脚手架 npm install -g @vue/cli ...

  2. Vue全家桶项目创建指南

    切换到要存放项目的目录中,然后使用vue init webpack 项目目录名创建项目 (1)填写项目名然后回车                                      习惯项目名小 ...

  3. 前端Vue+后端Django项目创建以及自动部署流程

    所有的环境都安装完了之后,接下来就要创建项目了,完整的项目开发流程是由开发的同学先写完代码,然后交付给运维的同学部署到测试和生产环境.DevOps可以让整个流程自动化,开发的同学只需要稍微会一些工具就 ...

  4. python运行一个项目_Django 项目创建到启动(最全最详细的第一个项目)

    一.前言 (一).概述 Python下有许多款不同的 Web 框架.Django是重量级选手中最有代表性的一位.许多成功的网站和APP都基于Django. Django是一个开放源代码的Web应用框架 ...

  5. python如何启动前端_Django项目创建到启动详解(最全最具体)

    一.前言 (一).概述 Python下有许多个不同的 Web 框架.Django是重量级选手中最有代表性的一位.许多成功的网址和APP都使用Django. Django是一个开放源码的Web应用框架, ...

  6. VUE入门-VUE初识者的福音

    什么是VUE 本文所有小demo建议CTRL C V 看一看,联系一下 是 Vue.js 指令 指令是带有 v- 前缀的特殊属性 v-bind v-bind:s v-bind:k v-cloak v- ...

  7. vue入门 vue基础之简单使用6--组件component

    组件与实例 组件和实例的区别 组件的使用和实例极其相似,实例所拥有的,组件几乎一应俱全 唯一需要注意的是data的使用 var vm= new Vue({});//实例 Vue.component// ...

  8. 二、IAR for ARM中STM32项目创建及其启动文件分析

    IAR for ARM STM32F10X官方固件库: 链接: https://pan.baidu.com/s/1U6vfGqp9IhhkvVuDXcxTtQ 提取码: 9mcx IAR for AR ...

  9. springboot项目创建和启动

    一.创建springboot项目 Spring Initializr: https://start.spring.io/ 通过这个网站创建springboot项目  选择基本依赖,可创建 二.启动项目 ...

最新文章

  1. 盘点当下大热的 7 大 Github 机器学习『创新』项目
  2. WIN7 常见问题及解决方法
  3. BetterWMF2021中文版
  4. 计算机基础知识的最小集合
  5. Nginx搭建静态资源映射实现远程访问服务器上的图片资源
  6. IOS基础之datePicker的使用
  7. 发掘Apache Camel的力量
  8. 机器学习接口代码之 Ridge、Lasso、Elasitc Net
  9. CDH5.16.2下载安装
  10. IE6/7 单选按钮 radio 无法选中解决方法
  11. 自动布局和view 设置frame同时有效
  12. 【TWVRP】基于matalb蚁群算法求解带时间窗的车辆路径规划问题【含Matlab源码 1406期】
  13. 苹果手机测距离_3D传感市场要变天!苹果力推之下,dToF将成新风口!
  14. [机器视觉]摄像机标定(2) 张正友标定最详细推导
  15. 在苹果Mac上怎样使用鼠标来放大图像?
  16. win10 DOS命令操作
  17. 代码埋点、可视化埋点、无埋点几种数据埋点方案的分析报告
  18. 【JAVA】贪吃蛇的初步实现(一)
  19. HEVC解码器HM源码阅读(三)读取一个NALU
  20. java 函数表_C语言、Java语言的符号表区别和特点是什么?分别是如和处理函数参数的?...

热门文章

  1. 暑假周报告(第三周)
  2. 面试宝典系列-PHP变量在内存中的存储方式
  3. vmware安装mac
  4. PHP 对象、数组间的转换
  5. Uncaught SecurityError: Failed to execute 'replaceState' on 'History': A history state object with
  6. Citrix_XenServer-6.1安装过程详解(转)
  7. 设计模式之四(抽象工厂模式第一回合)
  8. if with large data project
  9. 你想被推荐系统毁掉么?
  10. 2021 三月1日雅思口语考试反思