【Vue CLI】从安装到构建项目再到目录结构的说明
"Vue CLI是一个基于Vue.js进行快速开发的完整系统.
Vue CLI致力于将Vue生态中的工具基础标准化。它确保了各种构建工具只需给予智能的默认配置便可平稳衔接.
这样我们就可以专注在撰写应用上,而不必花好几天去纠结配置的问题。于此同时,它还为每个工具提供了调整配置的灵活性.
Vue CLI的概念:
·
通俗的说,Vue Cli是我们创建大型项目时的"==脚手架==".
所谓的脚手架,就是帮助我们建设好了建造大厦的所需模块,建设者只需往模块里面填入实质的内容,即可完成大厦的建设.
对于程序开发来说,脚手架使程序员只需要关注业务逻辑的实现上面,我们不需要再关注兼容性问题,不需要再浪费时间在重复的工作上.
·
Vue Cli能够帮助我们快速的构建大型Web应用,提升了我们的开发效率.
Vue Cli是基于Webpack构建的,并带有合理的默认配置.
关于Webpack的安装及使用,请参考此文献:https://blog.csdn.net/qq_41964425/article/details/83997312
Vue CLI的安装:
·
这里我们将使用npm全局安装Vue Cli 2版本.
Vue Cli 2和Vue Cli 3的安装方式略有不同,因为Vue Cli 3将包名称由vue-cli改成了@vue/cli.
下面是使用npm方式全局和本地安装Vue Cli 2和Vue Cli 3的命令:
·
全局安装:
npm install -g vue-cli
版本2
npm install -g @vue/cli
版本3
·
本地安装:
npm install vue-cli --save
版本2
npm install @vue/cli --save
版本3
·
npm的安装命令可简写为:npm i xxxx
·
补充:如果是Mac系统,可能需要加上sudo
(权限问题,包括本文中后续的所有命令),即:sudo npm install -g vue-cli
,回车后输入当前用户的密码即可.
关于npm的安装及使用,请参考此文献:https://blog.csdn.net/qq_41964425/article/details/83993514
@
***
1. 构建我们的项目
步骤一:
首先,我们打开终端,输入安装命令:npm i -g vue-cli
.
(这里我们使用全局安装方式安装Vue Cli 2版本).
步骤二:
然后,我们进入自己的工作目录,输入vue init webpack vue-demo
来构建一个名为vue-demo
的项目.
过程中会提示我们输入一些信息,如果出现提示是否需要安装VueRouter和单元测试等功能,那么请根据你的项目实际需求输入Yes/No,这里我们将按照下图进行输入:
步骤三:
构建完成之后,会在我们的工作目录中生成一个名为vue-demo
的文件夹.
我们进入此文件夹,可以看到项目结构如下:
此时,我们打开终端,进入刚刚生成的vue-demo
文件夹,输入启动命令:npm run dev
.
最后,在浏览器中访问:http://localhost:8080/ ,如下图:
到这里,我们的Vue项目已经构建完成了.
下面我们来看看项目根目录下的各目录和文件的功能.
2. 目录结构说明
2.1 build目录
==build目录中的文件主要用于webpack配置.==
重要的三个文件:
webpack.base.conf.js
:用于基本webpack配置.webpack.dev.conf.js
:用于开发环境webpack配置.web pack.prod.conf.js
:用于生产环境webpack配置.
nom run build
命令是用来构建生产环境的,而build.js
文件就是该命令的入口配置文件,主要用于生产环境.
2.2 config目录
==config目录中的文件是用来配置项目测试和运行环境的.==
在index.js
文件中有一个proxyTable
属性,该属性的属性值如果加上对应的后台地址和端口,便可以和后台进行联调.
2.3 src目录
==src目录存放的是我们的项目源文件,它是整个项目使用频率最高的文件夹.==
assets
目录存放的是公共的资源,会被webpack当成模块资源处理;
components
目录存放的是我们整个项目的所有组件;
router
目录存放的是我们整个项目的路由文件;
App.vue
文件是所有vue文件的出口;
main.js
文件对应App.vue
文件,用于创建vue实例,也是入口文件,对应web pack.base.config.js
文件里的入口配置文件.
2.4 static目录
==该目录用来存储项目的静态文件,它是真正的静态资源,完全不被webpack处理.==
"
【Vue CLI】从安装到构建项目再到目录结构的说明的更多相关文章
- 基于vue模块化开发后台系统——构建项目
文章目录如下:项目效果预览地址项目开源代码基于vue模块化开发后台系统--准备工作基于vue模块化开发后台系统--构建项目基于vue模块化开发后台系统--权限控制 前言 在熟悉上一篇说到准备工具之后, ...
- 使用vue/cli 创建一个简单的项目
首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...
- JavaWeb学习之tomcat安装与运行、tomcat的目录结构、配置tomcat的管理用户、web项目目录、虚拟目录、虚拟主机(1)
1.tomcat安装与运行双击tomcat目录下的bin/startup.bat,启动之后,输入http://localhost:8080,出现安装成功的提示,表示安装tomcat成功 2.tomca ...
- YII框架开发一个项目的通用目录结构
YII框架开发一个项目的通用目录结构: 3 testdrive/ 4 index.php Web 应用入口脚本文件 5 assets/ 包含公开的资源文件 6 css/ 包含 CSS 文件 7 ima ...
- maven项目的标准目录结构
maven项目的标准目录结构如下:
- maven 创建web项目的标准目录结构
maven 创建web项目的标准目录结构 CreateTime--2018年4月18日21:05:37 Author:Marydon 1.标准目录介绍(开发目录) 2.在eclipse下,目录展示 ...
- 基于vue cli 3.0创建前端项目并安装cube-ui
前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...
- vue cli的安装与使用
一.简介 vue作为前端开发的热门工具,受到前端开发人员的喜爱.为了简化项目的构建,采用vue cli来简化开发. vue cli是一个全局安装的npm包,提供了终端使用的命令.vue create可 ...
- vue cli 3.0快速创建项目
本地安装vue-cli 前置条件 更新npm到最新版本 命令行运行: npm install -g npmnpm就自动为我们更新到最新版本 淘宝npm镜像使用方法 npm config set reg ...
随机推荐
- Redis 数据总结(1 数据导入)
理论基础部分:http://www.redis.cn/topics/mass-insert.html 几百上千万的数据建议使用pipe来完成导入. 1.windows 下数据导入命令: type ou ...
- 数据升级包 - bin文件
运行完升级包后,正常的现象 开头: 结尾:
- 题解 AT4170 【[ABC103A] Task Scheduling Problem】
翻译 有 \(3\) 个正整数 \(a\).\(b\).\(c\),请你输出这 \(3\) 个数中的最大值 \(-\) 最小值的差. 分析 求最大值 \(-\) 最小值的差,我们自然可以使用 for ...
- JS变量和数据类型及其转化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- dgango 反射
相关 """ 反射 由字符串反向找 变量.函数.类 """ import sys class Person(object): def __i ...
- importing-cleaning-data-in-r-case-studies
目录 importing-cleaning-data-in-r-case-studies 导入数据 查看数据结构 下面的一些都是查数据结构的 separate 拆分单元格 读取指定位置的数据 stri ...
- AcWing 1013. 机器分配
//分组背包 for物品 for体积 for 决策 #include <iostream> using namespace std; ; int n, m; int w[N][N]; in ...
- 在GPU上训练数据
在GPU上训练数据 模型搬到GPU上 数据搬到GPU上 损失函数计算搬到GPU上
- Python 排序---sort与sorted学习(这是摘录别人的资源总结,自己可临摹学习)
第一种:内建方法sort() 可以直接对列表进行排序 用法: list.sort(func=None, key=None, reverse=False(or True)) 对于reverse这个boo ...
- this 的值到底是什么?一次说清楚
this 的值到底是什么?一次说清楚 方应杭 杭州饥人谷教育科技有限公司 CTO 1,071 人赞同了该文章 你可能遇到过这样的 JS 面试题: var obj = { foo: function ...