一分钟理清Vue-cli 代码构建步骤。
1、
$ npm install vue -cli -g $ vue init webpack project-name $ cd project-name $ npm install $ npm run dev
2、打开项目文件夹,开发目录主要为src, assets下存放想要放置的图片,commponents下存放自己写好的组件,组件之间相互调用;src下同样可以创建自定义文件夹,用来存放图片、路由、配置、样式等
3、App.vue是所有vue组件的老大,即主组件,所有组件通过互相调用有了联系,最外层的组件导入到App.vue中之后,并输出,该组件里写html页面整体的样式,如html/body/#app等。
4、各个组件单独写自己所涉及的样式及js
5、main.js为所有项目打包的js的入口文件,这里要引用所有主要的东西:
Vue
App
vue-resource
vue-router
vuex
并注册相应实例或创建相应的实例
6、配置paskage.json和webpack/babel等
7、根目录下的index.html是html的主文件,即主要的html框架写在这里,所有的js最后是要渲染到这里的。并定义最外层容器,比如<div id=”app”></div>
一分钟理清Vue-cli 代码构建步骤。的更多相关文章
- [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍
一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...
- 基于@vue/cli 的构建项目(3.0)
1.检测node的版本号 注意:1.Vue CLI需要Node.js的版本 8.9+(推荐8.11.0+) 所以在安装Vue CLI之前先看下node的版本 node -v 2.安装@vue/cli ...
- vue cli 3
介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...
- 【Vue CLI】从安装到构建项目再到目录结构的说明
目录 1. 构建我们的项目 2. 目录结构说明 2.1 build目录 2.2 config目录 2.3 src目录 2.4 static目录 "Vue CLI是一个基于Vue.js进行快速 ...
- jenkins检查代码,如没更新停止构建步骤
需求分析 在jenkins中没有找到构建前插件,每次构建时间很长,希望可以实现判断代码是否更新,如果没更细则停止构建步骤. 实现步骤 在构建时执行shell命令,而jenkins提供的的环境变量可以实 ...
- vue源码构建代码分析
这是xue源码学习记录,如有错误请指出,谢谢!相互学习相互进步. vue源码目录为 vue ├── src #vue源码 ├── flow #flow定义的数据类型库(vue通过flow来检测数据类型 ...
- 第一章构建vue项目,代码仓库管理
一.安装node.js.vue-cli脚手架 1.安装node.js 下载地址:https://nodejs.org/en/download 查看版本号 node -v .npm -v 出现版本号即安 ...
- 用@vue/cli发布npm包
1.环境准备 安装node,npm,@vue/cli 2.初始化项目 用@vue/cli创建新项目 vue create mtest-ui 删除public,main.js,App.vue等无关文件, ...
- vue cli 平稳升级webapck4
webpack4 released 已经有一段时间了,插件系统趋于平稳,适逢对webpack3的打包速度很不满意,因此决定将当前在做的项目进行升级,正好也实践一下webpack4. 新特性 0配置 应 ...
随机推荐
- Android NFC近场通信2——NFC标签调度
上面一篇文章简单介绍了NFC的背景和技术应用,今天主要是讲解一下NFC如何发起通信和标签通信(主要是翻译android官网的资料,中间加入个人心得). NFC总是在一个发起者和一个被动目标之间发生.发 ...
- java replaceall 使用正则表达式替换单等号,不替换其他相关的等号。
写项目需要将公式配置到数据库中,取出后根据公式规则进行比较,由于公式的等于是用单等号,在java中无法直接使用,故需要将单等号替换成双等号,单又不能影响大于等于以及其他形式.故果断选择正则表达式替换. ...
- 【css】关于 hr 在各浏览器中的问题
在做页面是有时候会用到分割线 hr,但是在 ie6 和 ie7 下显示很蛋疼,本文将教你如何写出兼容各浏览器的 hr. 首页我们先了解下 hr 在各浏览器下的差异,如下表格: 正常浏览器 ie6. ...
- JavaScript系列文章:谈谈let和const
JavaScript系列文章:谈谈let和const 最近接触到ES6的一些相关新特性,想借let和const两个命令谈谈JavaScript在变量方面的改进. 由于let和const有很多相似之 ...
- Genymotion 解决虚拟镜像下载速度特别慢的问题[转]
Genymotion下载地址(需注册账号):https://www.genymotion.com/download/ Genymotion号称Android模拟器中运行最快的,但是服务器在国外,And ...
- 解决在IE浏览器中JQuery.resize()执行多次的方法(转)
最近在做前台效果的时候用到了JQuery提供的resize()事件.resize 这个事件是监听浏览器窗口的放大与缩小,也就是说浏览器窗口大小的变化. 我在W3CSCHOOL上面查阅的时候,提供了一个 ...
- ADO.NET实体数据模型中关于数据库字段默认值的处理
无论是Visual Studio 2010或者2013内置的ADO.NET实体数据模型都有一个小问题:数据库中有些字段已设置了默认值,但ADO.NET实体数据模型工具并不会自动进行设置. 这时需要手工 ...
- Build 2016上一些令人兴奋的东西
本来应该要更新Windows IOT开发入门的,但是由于Build 2016刚刚过去,不得不将一些令人兴奋的东西给大家进行分享. 首先对于错过这次直播的,可以在以下链接再次看到观看: https:// ...
- easy-ui 使用总结
1.datagrid 2次加载问题: 解决方案:<table id="DataGrid" class="easyui-datagrid"> 改为 & ...
- 【转】【Python】Python多进程与多线程
1.1 multiprocessing multiprocessing是多进程模块,多进程提供了任务并发性,能充分利用多核处理器.避免了GIL(全局解释锁)对资源的影响. 有以下常用类: 类 描述 P ...