使用Vue脚手架(vue-cli)从零搭建一个vue项目(包含vue项目结构展示)
注:在搭建项目之前,请先安装一些全局的工具(如:node,vue-cli等)
- node安装:去node官网(https://nodejs.org/en/)下载并安装node即可,安装node以后就可以正常使用npm命令
- 全局安装vue-cli工具:npm install vue-cli -g
开始创建项目:
- 找一个合适的位置,打开命令窗口,使用vue初始化基于webpack的新项目
vue init webpack vue-demo //注意名称太长的话它会有错误提示,就像VueDemo 我们可以写成vue-demo就可以了
如上图,它会又各种提示,还有需要安装的东西,可以自行按照自己的需求去安装东西。
生成以后它会在你刚开始选择的位置生成一个现成的vue的一个项目架子,就像这样:
启动项目:
npm run dev
根据上边的地址在浏览器菜单栏里边打开项目即可>
项目启动成功了,我们可以继续我们项目中所需要的工具,如:
npm install vue-router --save (路由管理模块)
npm install vuex --save (状态管理模块)
npm install vue-resource --save (网路请求模块)
以下是脚手架生成的项目结构:
|-- 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数据等
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md // 项目说明
|-- index.html // 入口页面
|-- package.json // 项目基本信息,第三方依赖的文件列表
使用Vue脚手架(vue-cli)从零搭建一个vue项目(包含vue项目结构展示)的更多相关文章
- 基于Idea从零搭建一个最简单的vue项目
一.需要了解的基本知识 node.js Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装.N ...
- 从零搭建一个SpringCloud项目之Feign搭建
从零搭建一个SpringCloud项目之Feign搭建 工程简述 目的:实现trade服务通过feign调用user服务的功能.因为trade服务会用到user里的一些类和接口,所以抽出了其他服务需要 ...
- 从零搭建一个IdentityServer——聊聊Asp.net core中的身份验证与授权
OpenIDConnect是一个身份验证服务,而Oauth2.0是一个授权框架,在前面几篇文章里通过IdentityServer4实现了基于Oauth2.0的客户端证书(Client_Credenti ...
- 从零搭建一个IdentityServer——目录(更新中...)
从零搭建一个IdentityServer--项目搭建 从零搭建一个IdentityServer--集成Asp.net core Identity 从零搭建一个IdentityServer--初识Ope ...
- 从零搭建一个IdentityServer——会话管理与登出
在上一篇文章中我们介绍了单页应用是如何使用IdentityServer完成身份验证的,并且在讲到静默登录以及会话监听的时候都提到会话(Session)这一概念,会话指的是用户与系统之间交互过程,反过来 ...
- 从零搭建一个IdentityServer——资源与访问控制
IdentityServer作为授权服务器它的最终目的是用于对资源进行管控,这里所说的资源有两种,其一是API资源,实际上也就是OIDC协议中客户端(RP)所需要访问的一系列受保护的资源(API),授 ...
- 一起来学Spring Cloud | 第一章 :如何搭建一个多模块的springcloud项目
在spring cloud系列章节中,本来已经写了几个章节了,但是自己看起来有些东西写得比较杂,所以重构了一下springcloud的章节内容,新写了本章节,先教大家在工作中如何搭建一个多模块的spr ...
- Vue脚手架(CLI)第一天
vue 1.脚手架的搭建(CLI) 1.1.下载nodejs,在官网, [nodejs官网地址][ https://nodejs.org/en/ ] 无脑下一步就可以了.环境自动安装 1.2.下载脚手 ...
- 使用vue脚手架(vue-cli)快速搭建项目
一.从最简单的环境搭建开始: 安装node.js,从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装).安装完成之后,打开命令行工具(win+r,然后输入cmd ...
- 用vue官方提供的模板vue-cli搭建一个helloWorld案例
安装环境 安装node.js并配置环境变量 安装淘宝镜像,npm install -g cnpm --registry=https://registry.npm.taobao.org 安装webpac ...
随机推荐
- android自己定义刷新类控件
android尽管定义了种类很丰富的控件.可是有的时候这些自己定义的控件还是不能满足我的要求,为了可以适配很多其它的需求,我们须要在原有的基础上进行自己定义控件. 今天我向大家介绍的就是android ...
- Java之——删除ArrayList中的反复元素的2种方法
转载请注明出处:http://blog.csdn.net/l1028386804/article/details/47414935 ArrayList是Java中最经常使用的集合类型之中的一个.它同意 ...
- 火狐浏览器设置bypass
http://blog.sina.com.cn/s/blog_6f7d179e0101a60l.html 某个网段不使用代理的设置FF和IE不同,IE是用*通配符,FF是用CIDR的表示法, FF的简 ...
- SQL Server 2005高可用性模式下创建数据库镜像
SQL Server 2005高可用性模式下创建数据库镜像 高可用性模式下创建数据库镜像 第一步: --创建镜像用数据库-在主服务器上操作 create database db_mirror on ...
- c#时间差高精度检查
两个时间差的高精度检查 static void Main(string[] args) { Console.WriteLine("开始时间:" + DateTime.Now.ToS ...
- 简述SQL with(unlock)与with(readpast)
所有Select加 With (NoLock)解决阻塞死锁,在查询语句中使用 NOLOCK 和 READPAST 处理一个数据库死锁的异常时候,其中一个建议就是使用 NOLOCK 或者 READPAS ...
- 【Docker构建私有仓库】
Docker默认不允许非HTTPS方式推送镜像,我们可以通过Docker的配置选项来取消此限制: [root@fedora ~]# cat /etc/docker/daemon.json { &quo ...
- Scrapy 框架介绍
Scrapy 框架 Scrapy,Python开发的一个快速.高层次的屏幕抓取和web抓取框架,用于抓取web站点并从页面中提取结构化的数据.Scrapy用途广泛,可以用于数据挖掘.监测和自动化测试. ...
- 36Kr众筹项目比呀比biyabi,调查分析研究报告,背后资方势力的关系梳理
36Kr众筹项目比呀比biyabi调查报告 个层次的评价. 变革家-比呀比拆解报告:http://biangejia.com/archives/12653 8.其它 没有通过微信,参加路演,有点遗 ...
- vue踩坑-Error: listen EADDRNOTAVAIL 192.168.1.122:8081
每天上班,重启电脑,按照下面的步骤,打开vue的项目,开始编写代码,但是,今天一如往常一般操作:1:cd /项目名称 下面就是运行项目了,cd /项目名称,我的文件放在D盘,所以先进入d盘,再进入项目 ...