vue2工程

vue当然可以使用script标签引入,不需任何依赖即可按照vue的语法进行使用。但中大型商用项目中,还是建议使用工程化方式使用vue,vue提供了官方脚手架vue-cli,可以快速构建vue项目,脚手架会帮助开发者创建好建议的工程目录、引入相关依赖,利用nodejs环境为vue项目的开发提供最大化的便利。vue-cli倾向于快速构建SPA工程,实际上vue也不一定做成SPA,具体场景具体分析吧。


全局安装vue-cli脚手架:
npm i vue-cli -g
安装完成后可使用vue命令来构建vue工程。

vue常用的命令有两个:listinit,list将列出官方提供的vue工程模板,init将初始化一个vue工程。

在实际项目中使用的模板为webpack或webpack-simple,中小型项目可使用webpack-simple,此模板为vue初始化一个最简洁的webpack工程,中大型项目可使用webpack,此模板将为vue初始化一个完整的webpack工程。

创建一个webpack模板vue工程:
vue init webpack 工程名
创建过程中将询问工程名、作者、是否使用eslink、单元测试框架等信息,根据需要填y或n。

创建完成后,cd进入工程根目录,npm i安装package.json中的依赖。
依赖完成后,使用
npm run dev
将自动打开浏览器在8080端口上访问vue工程,实际是利用node环境创建一个express框架支撑开发环境。

创建好的webpack模板vue工程目录:

目录说明:

├── build                           构建脚本目录
│   ├── build-server.js                 运行本地构建服务器,可以访问构建后的页面
│   ├── build.js                        生产环境构建脚本
│   ├── dev-client.js                   开发服务器热重载脚本,主要用来实现开发阶段的页面自动刷新
│   ├── dev-server.js                   运行本地开发服务器
│   ├── utils.js                        构建相关工具方法
│   ├── webpack.base.conf.js            wabpack基础配置
│   ├── webpack.dev.conf.js             wabpack开发环境配置
│   └── webpack.prod.conf.js            wabpack生产环境配置
├── config                          项目配置
│   ├── dev.env.js                      开发环境变量
│   ├── index.js                        项目配置文件
│   ├── prod.env.js                     生产环境变量
│   └── test.env.js                     测试 环境变量
├── src                             源码目录    
│   ├── main.js                         入口js文件
│   ├── app.vue                         根组件
│   ├── components                      公共组件目录
│   │   └── title.vue
│   ├── assets                          资源目录,这里的资源会被wabpack构建
│   │   └── images
│   │       └── logo.png
│   ├── routes                          前端路由
│   │   └── index.js
│   ├── store                           应用级数据(state)
│   │   └── index.js
│   └── views                           页面目录
│       ├── hello.vue
│       └── notfound.vue
├── static                          纯静态资源,不会被wabpack构建。
└── test                            测试文件目录(unit&e2e)└── unit                            单元测试└── e2e                            e2e测试框架
├── index.html                     入口页面,SPA入口html
├── .babelrc                       ES6配置
├── .editorconfig                  webstorm编辑器配置
├── .eslintignore                  eslink语法检测忽略
├── .eslintrc.js                   eslink配置
├── .postcssrc.js                  css转换配置
├── .gitignore                     git忽略提交
├── .package.json                  npm依赖配置
├── README.md                      项目说明

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247653.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【GamePlay】入门篇

【GamePlay】入门篇 游戏性编程是指通过一系列游戏系统将游戏想法变成现实的过程。 本次的简例以NPC设计为主。 通常在进行脚本设计前,对NPC的属性进行基本的添加和设定,诸如动画系统、物理系统等等。 1.动画系统 添加Animator组件,绑定骨骼。…

HttpHttps

http协议与https Http 客户端发送一个HTTP请求到服务器的请求消息包括以下格式: **请求行(request line)、请求头部(header)、空行 和请求数据四个部分组成。** Get请求例子,使用Charles抓取的request&…

vue2使用axios post跳坑,封装成模块

终于将vue-resource替换成axios了,其中像application/x-www-form-urlencoded发送的头信息以及返回的response结果这两点都需要注意一下。 其实https://github.com/mzabriskie/axios也有说明的。因为我在vue-resource中使用了Vue.http.options.emulateJSON true;&am…

并发与多线程

并发 并发(concurrency)是指CPU在某个时间段内交替处理多任务的能力。每个CPU不可能只顾着执行某个进程,而让其他进程一直等待被执行。所以,CPU把可执行时间均分成若干份,每个进程执行一份或多份时间后,记录…

synchronize原理

synchronized的三种应用方式 一. 修饰实例方法,作用于当前实例加锁,进入同步代码前要获得当前实例的锁。 二. 修饰静态方法,作用于当前类对象加锁,进入同步代码前要获得当前类对象的锁。 三. 修饰代码块,指定加锁对象&…

不能修改“System Roots”钥匙串

iOS mac添加证书 不能修改“System Roots”钥匙串错误 如图: 解决方式: 打开钥匙串---登录---,直接把证书拖过来 然后,查看--我的证书,里面,找到证书,即可

未来产品的设计

Donald A. Norman继《情感化设计》之后,又一设计精品力作: 未来产品的设计样章试读及本书预定:http://www.china-pub.com/195642市场价 :¥39.00 会员价 : ¥29.25(75折) 【作  者】(美)Donald…

css之字体图标

SVG与字体图标 SVG图片是矢量图片,不会随着图片的伸缩而影响质量,通常把只有一种颜色的图标做成SVG,通过SVG生成字体图标,放到项目中使用。 https://icomoon.io/是一个比较快捷的生成字体图标的线上工具,进入主页后&…

研发阶段模拟接口数据

因为在vue-cli工程中需要创建很多.vue文件,我们希望创建vue文件和创建html、css、js文件一样右键即可选择创建,并且创建的文件中可预先写好模板代码。 webstorm-Preferences打开选项界面 选择File and Code Templates,点击绿色加号 填…

真实项目中 ThreadLocal 的妙用

一、什么是 ThreadLocal ThreadLocal 提供了线程的局部变量,每个线程都可以通过 set() 和 get() 来对这个局部变量进行操作,但不会和其他线程的局部变量冲突,实现了线程间的据隔离。 简单讲:一个获取用户的请求线程 A,…

css之flex布局

flex布局是css3中的重要布局方式,称为“弹性布局”,每次想到它主要是遇到元素垂直居中、元素宽高自适应的问题,这些问题在flex中都能过简单设置就解决,它更像是原生APP中的布局操作,布局不必写N多的盒模型代码来实现&a…

javascript对URL中的参数进行简单加密处理

javascript的api本来就支持Base64,因此我们可以很方便的来进行编码和解码。 var encodeData window.btoa("namexiaoming&age10")//编码 var decodeData window.atob(encodeData)//解码。 下面来个具体的例子来说明如何对url中参数进行转码&#xff…

HTML元素title里面如何换行

在调试代码的时候我就遇到一个问题,HTML元素title里面通常只显示一行,那我想要他换行,就是多行显示,如何实现?JS代码里面比如Alert里面又该如何换行? 经过我的一番实验 要实现这种效果有几种方法&#xff0…

div内图片和文字水平垂直居中

大小不固定的图片、多行文字的水平垂直居中 本文综述 想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示。 关于图片垂直居…

敏友的【敏捷个人】有感(3): 有感于“敏捷个人”讨论与练习

2010年我对个人管理进行了自己的一些思考,在2011年提出敏捷个人概念,并且在线上、线下进行了多次交流,在一些大会上也做过分享。现在,已经有很 多IT和非IT的敏友们知道并在践行敏捷个人,帮助自己更快的成长。我收到大家…

jQuery编写插件

引言: 在项目中不同页面经常要用到已经写好的交互,比如弹窗,比如下拉菜单,比如选项卡,比如删除... 此时如果每次都把代码copy一份无疑是一件比较麻烦并且无趣的事情,而且个人认为有些low了,我们…

webstorm中nodejs代码提示

preferences->languages&frameworks->Node.js and Npm中选择一个本地的node版本 preferences->languages&frameworks->JavaScript->Libraries 勾选node.js Core 回到代码

Array.prototype.slice.call(arguments)

Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组,除了IE下的节点集合(因为ie下的dom对象是以com对象的形式实现的,js对象与com对象不能进行转换)如:1 var a{length:2,0:first,1:second}; 2 Ar…

nodejs常用模块-url

URL nodejs中针对url的常用方法。 node下打印url,结果: 引入url模块 var url require(url) 1、parse方法 将url解析成对象,parse方法原型: url.parse(urlStr[, parseQueryString][, slashesDenoteHost]) 可传递三个参数…

常用的javascript设计模式

请坚持 什么是设计模式 百度百科: 设计模式(Design pattern)是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。 使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问,设计模式…