Vue入门:Vue项目创建及启动
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项目创建及启动相关推荐
- Vue 移动端项目创建
前言 移动端我们一般通过Vue脚手架手动自定义创建项目, 只需要Node环境我们就可以通过npm下载Vue脚手架,通过命令创建项目. npm下载脚手架 npm install -g @vue/cli ...
- Vue全家桶项目创建指南
切换到要存放项目的目录中,然后使用vue init webpack 项目目录名创建项目 (1)填写项目名然后回车 习惯项目名小 ...
- 前端Vue+后端Django项目创建以及自动部署流程
所有的环境都安装完了之后,接下来就要创建项目了,完整的项目开发流程是由开发的同学先写完代码,然后交付给运维的同学部署到测试和生产环境.DevOps可以让整个流程自动化,开发的同学只需要稍微会一些工具就 ...
- python运行一个项目_Django 项目创建到启动(最全最详细的第一个项目)
一.前言 (一).概述 Python下有许多款不同的 Web 框架.Django是重量级选手中最有代表性的一位.许多成功的网站和APP都基于Django. Django是一个开放源代码的Web应用框架 ...
- python如何启动前端_Django项目创建到启动详解(最全最具体)
一.前言 (一).概述 Python下有许多个不同的 Web 框架.Django是重量级选手中最有代表性的一位.许多成功的网址和APP都使用Django. Django是一个开放源码的Web应用框架, ...
- VUE入门-VUE初识者的福音
什么是VUE 本文所有小demo建议CTRL C V 看一看,联系一下 是 Vue.js 指令 指令是带有 v- 前缀的特殊属性 v-bind v-bind:s v-bind:k v-cloak v- ...
- vue入门 vue基础之简单使用6--组件component
组件与实例 组件和实例的区别 组件的使用和实例极其相似,实例所拥有的,组件几乎一应俱全 唯一需要注意的是data的使用 var vm= new Vue({});//实例 Vue.component// ...
- 二、IAR for ARM中STM32项目创建及其启动文件分析
IAR for ARM STM32F10X官方固件库: 链接: https://pan.baidu.com/s/1U6vfGqp9IhhkvVuDXcxTtQ 提取码: 9mcx IAR for AR ...
- springboot项目创建和启动
一.创建springboot项目 Spring Initializr: https://start.spring.io/ 通过这个网站创建springboot项目 选择基本依赖,可创建 二.启动项目 ...
最新文章
- 盘点当下大热的 7 大 Github 机器学习『创新』项目
- WIN7 常见问题及解决方法
- BetterWMF2021中文版
- 计算机基础知识的最小集合
- Nginx搭建静态资源映射实现远程访问服务器上的图片资源
- IOS基础之datePicker的使用
- 发掘Apache Camel的力量
- 机器学习接口代码之 Ridge、Lasso、Elasitc Net
- CDH5.16.2下载安装
- IE6/7 单选按钮 radio 无法选中解决方法
- 自动布局和view 设置frame同时有效
- 【TWVRP】基于matalb蚁群算法求解带时间窗的车辆路径规划问题【含Matlab源码 1406期】
- 苹果手机测距离_3D传感市场要变天!苹果力推之下,dToF将成新风口!
- [机器视觉]摄像机标定(2) 张正友标定最详细推导
- 在苹果Mac上怎样使用鼠标来放大图像?
- win10 DOS命令操作
- 代码埋点、可视化埋点、无埋点几种数据埋点方案的分析报告
- 【JAVA】贪吃蛇的初步实现(一)
- HEVC解码器HM源码阅读(三)读取一个NALU
- java 函数表_C语言、Java语言的符号表区别和特点是什么?分别是如和处理函数参数的?...