VueCli
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性。
Vue CLI
概念
通俗的说,Vue CLI是我们创建大型项目时的脚手架,所谓脚手架,就是帮助我们建设好了建造大厦的所需模板,建设者只需往模板里面填入实质内容,即可完成大厦的建设,对于程序开发来说,脚手架使程序员只需要关注业务逻辑的实现上面,我们不需要再关注兼容性问题,不需要再浪费时间在重复的工作上。
Vue Cli帮助我们快速构建大型web应用,提升了我们的开发效率,它基于webpack构建,并带有合理的默认配置。
安装
我们使用npm安装Vue Cli,Vue Cli 2和Vue Cli 3的安装方式略有不同,因为Vue Cli 3将包名称由vue-cli改成了@vue/cli,下面我们分别使用全局和本地的方式安装Vue Cli2和版本3:
全局安装
1234 |
// 版本2npm install -g vue-cli// 版本3npm install -g @vue/cli |
本地安装
1234 |
// 版本2npm install vue-cli --save// 版本3npm install @vue/cli --save |
构建我们的项目
安装好Vue Cli之后,下面我们来搭建一个项目。本文测试采用的是全局安装的Vue Cli 2版本。
进入项目环境,创建初始化项目:
- vue基于webpack构建项目
- mydemo是我们的项目名称
创建过程中,会出现提示是否需要安装VueRouter和单元测试等功能,根据你的项目实际需要输入Y/N即可。
构建完成之后,在项目根目录下会生成一个mydemo目录,然后根据提示,进入mydemo项目,我们的项目结构如下:
运行npm run dev, 出现如下提示后,在浏览器中访问http://localhost:8080。
12345678910 |
npm run dev > mydemo@1.0.0 dev /Users/pizza/Downloads/vue-demo/mydemo> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 95% emitting DONE Compiled successfully in 2403ms Your application is running here: http://localhost:8080 |
浏览器中会出现Vue的欢迎页面,如下图所示:
至此,我们的Vue项目构建完成了。下面解释一下项目根目录下的各目录和文件的功能。
目录结构说明
build目录
build目录中的文件主要是用来进行webpack配置。
其中最重要的就是webpack.base.conf.js, webpack.dev.conf.js, webpack.prod.conf.js三个文件,分别是基本webpack配置、开发环境webpack配置、生产环境webpack配置。
npm run build命令是用来构建生产环境的,而build.js文件就是该命令的入口配置文件,主要用于生产环境。
config目录
config目录中的文件是用来配置项目测试和运行环境的。
在index.js文件中有一个proxyTable属性,该属性的属性值如果加上对应的后台地址和端口,就可以和后台进行联调。
static目录
static目录用来存储项目的静态文件。它是真正的静态资源,完全不被webpack处理。
src目录
src目录存放的是我们项目的源文件,它是整个项目使用频率最高的文件夹。
assets目录存放的是公共的资源,会被webpack当成模块资源处理;
components目录存放的是我们整个项目的所有组件;
router目录则存放的是我们整个项目的路由文件;
App.vue文件是所有vue文件的入口;
main.js对应App.vue 创建vue实例,也是入口文件,对应webpack.base.config.js里的入口配置文件。
迁移我们的项目
接下来,我们将前面写的路飞学城项目迁移到Vue Cli的结构中。
初始化一个luffycity项目
1 |
vue init webpack luffycity |
初始化完成之后,在当前目录下面会出现一个luffycity的目录,目录结构与上述项目是一致的。我们即将项目填充进这个脚手架中。
准备内容
并将图片存入static目录下, 如下图:
配置路由
如下图:
使用组件
如下图:
配置Vue实例
创建Vue实例,配置路由组件,同时安装element-ui并导入,如下图:
最后使用命令npm run dev运行项目。至此我们已经将之前的项目完整的迁移到Vue Cli中。
VueCli的更多相关文章
- vue vue-cli安装
npm 更新 cnpm install -g npm Vue 的基本用法 Vue 相比于 React 和 Angular 容易上手多了,因此我对 Vue 的学习主要以文档为主,视频为辅(只有像我这种菜 ...
- nodeJS(express4.x)+vue(vue-cli)构建前后端分离详细教程(带跨域)
好想再回到大学宿舍,当时床虽小,房随小,但是心确是满的 ----致 西安工程大学a-114舍友们 转载请注明出处:水车:http://www.cnblogs.com/xuange306/p/6185 ...
- vue-cli
vue-cli 脚手架 vue-loader 作用:提供基本项目结构 本身集成了很多项目模板:simple,webpack ,webpack-simple; simple:几乎没什么用: webp ...
- 使用nodeJs安装Vue-cli
TIP:win10下安装,使用管理员身份进行,否则会有权限限制. 1,安装完成node,node有自带的npm,可以直接在cmd中,找到nodeJs安装的路径下,进行命令行全局安装vue-cli.(n ...
- Vue脚手架工具vue-cli和调试组件vue-devtools
https://github.com/vuejs/vue-cli npm install vue-cli -g vue init webpack my-project cd my-project // ...
- vue-cli构建vue项目
参考资料:Vue2.0 新手完全填坑攻略—从环境搭建到发布 1.Node.js安装 https://nodejs.org/en/download/ 2.安装vue-cli npm install -g ...
- vue-cli安装失败问题
1.尝试 管理员权限 安装,看是否能解决问题 2.仍未解决问题, 系统变量增加: C:\Program Files\nodejs\node cache\node_modules\vue-cli\bi ...
- vue-cli 安装报错
# 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project ...
- vue-cli快速构建Vue项目
vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. vue-cli怎么使用? 安装vue-cli之前,需要先装好vue 和 webpack npm i ...
- vue-cli需要的包
vue-cli需要的包 npm install webpack webpack-dev-server --save-dev npm install vue-loader vue-html-loader ...
随机推荐
- jquery deferred promise
<script type="text/javascript">/* Deferredstate (then,done, fail, always,pipe, progr ...
- shell 脚本实战笔记(4)--linux磁盘分区重新挂载
背景: Hadoop的HDFS文件系统的挂载, 默认指定的文件目录是/mnt/disk{N}. 当运维人员, 不小心把磁盘挂载于其他目录, 比如/mnt/data, /mnt/disk01, /mnt ...
- linux shell终端打开方式
前言 Linux操作系统没有Window操作系统界面友好,使用者需要使用命令与系统进行交互,交互媒介为shell终端. 有三种方式可以打开终端: 方法一: 打开新的窗口并打开shell终端,快捷键:c ...
- 利用asynchttpclient开源项目来把数据提交给服务器
可以通过github去查找asynchttpclient,并下载源代码,并加载到自己的工程中. 1.利用get方法提交 2.利用post方法来提交
- HDU - 6311:Cover(欧拉回路,最少的一笔画覆盖无向图)
The Wall has down and the King in the north has to send his soldiers to sentinel. The North can be r ...
- 从dfs向动态规划过渡
据说每一个dfs,都能用动态规划思想做出来. 首先要明白dfs与动态规划的一些小要点 1)dfs重在通过使用递归来使用不同的选择,通过使用形参的改变实现不同情景的改变(形参既包括了代价,又包含了结 ...
- LG1419 【寻找段落】
前言 鉴于这题的题解质量(连LaTeX公式都没有),我决定再发一篇详细的题解,不仅方便大家,还可以作为我学习单调队列优化dp的小结(尽管这题不是dp). 分析 题目要求求一个最大的实数\(x\),使得 ...
- Android中logcat和日志打印
一.logcat对日志过滤 1.# logcat --help # logcat --help Usage: logcat [options] [filterspecs] options inclu ...
- asp.net && javascript MD5加密
/* * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message * Digest Algorithm, as d ...
- 如何开启GZIP
服务器设置 gzip 压缩是 web 开发里很普遍的做法.假设你要请求一个 100k 的文件,网络传输速度为 50k/s,需要 2s 才能得到数据,但是如果在服务器设置了 gzip 压缩,将服务端的文 ...