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,一经查实,立即删除!

相关文章

flutte的第一个hello world程序

用命令行创建项目: flutter create flutterdemo VSCode或者AS连接手机后 输入 flutter run 编译后就可以将默认的代码显示在手机上了 开始写hello world 代码,这段代码写在根目录\lib\main.dart文件中,也是Flutter主文件。 整个代码如下 impo…

Ajax 设置Access-Control-Allow-Origin实现跨域访问

之前遇到的问题整理 ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法,JSONP方法是一种非官方方法,而且这种方法只支持GET方式,不如POST方式安全。 即使使用jquery的jsonp方法,type设为POST…

vue工程webpack模板配置说明

vue工程webpack模板下的配置文件非常多,只能在实际开发过程中反复熟悉,才能渐渐体会官方将配置文件拆分细化的合理性。 主要配置文件中代码的作用从网上摘录了比较全的一份注释,做下记录。 dev-server.js 开发服务端配置 require(./check-v…

目录的拼接

找到被拼接文件所在的目录,然后进行拼接 import os 获取当前目录: os.path.dirname(__file__) 如下,被拼接文件所在目录与当前目录的上级目录在同一文件夹下: os.path.join(os.path.dirname(os.path.dirname(__file__)),‘文件夹路…

vue-resource 拦截器(interceptor)的使用

拦截器-interceptor 在现代的一些前端框架上,拦截器基本上是很基础但很重要的一环,比如Angular原生就支持拦截器配置,VUE的Axios模块也给我们提供了拦截器配置,那么拦截器到底是什么,它有什么用?拦截器能帮…

【GamePlay】入门篇

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

vue axios POST请求中参数以form data和request payload形式的原因

HTTP请求中,如果是get请求,那么表单参数以namevalue&name1value1的形式附到url的后面,如果是post请求,那么表单参数是在请求体中,也是以namevalue&name1value1的形式在请求体中。通过chrome的开发者工具可以看…

vue-resource使用

vue-resource是一个http请求插件,遵循promise,类似jquery中ajax操作。 vue-resource已不被官方推荐,官方推荐axios插件来操作http协议。 vue-resource中提供的方法 get(url, [options]) head(url, [options]) delete(url, [options]) jso…

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…

axios使用

axios和vue-resource一样,是一个vue中操作http的插件,遵循promise,vue官方也推荐使用axios。 安装axios npm i axios -S axios也是在运行时需要的,所以要保存在dependencies中。 引入axios import axios from axios Vue.proto…

jQuery length 和 size()区别

jQuery length和size()区别总结如下: 1.length是属性,size()是方法。 2.如果你只是想获取元素的个数,两者效果一样既 $("img").length 和 $("img").size() 获取的值是一样的;但是如果是获取字符串的长…

一些关于自己的未来的东西

2019.7.4 自己大一建立对编程的基础认识,确实培养了一些兴趣,入了个门,不过没有接触到本质。大二加入到了学校的网站开发团队,对网站开发后端进行了学习,对后台开发也有了基础的学习吧,哈哈可能以后就是要走…

Javascript面向对象编程:构造函数的继承

今天要介绍的是,对象之间的"继承"的五种方法。 比如,现在有一个"动物"对象的构造函数。 function Animal(){ this.species "动物"; } 还有一个"猫"对象的构造函数。 function Cat(name,color){ this.name nam…

并发与多线程

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

有没有朋友可以帮我解释一下贴水是什么意思?

通俗易懂的讲:贴水便宜,升水贵 当前,螺纹钢05合约就是贴水01合约 翻译,螺纹钢05合约就是比01合约便宜 升水同理 转载于:https://www.cnblogs.com/luoluo-123/p/11142229.html

es6常用点记录

letconst解构赋值字符串数组函数对象SymbolSetWeakSetMapWeakMapProxyreflectProxy与Reflex结合实例classpromiseiteratorGerneratorDecorators模块学习资料 let /* let 声明变量 *//* es6相对于es5的全局和局部作用域,多了一个块作用域,块作用域里声明的…

jquery插件封装指南

入门 编写一个jQuery插件开始于给jQuery.fn加入​​新的功能属性,此处添加的对象属性的名称就是你插件的名称: jQuery.fn.myPlugin function(){//你自己的插件代码};用户非常喜欢的$符号哪里去了? 它仍然存在,但是,为…

synchronize原理

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

不能修改“System Roots”钥匙串

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