vue:概要
一、环境
#安装nodejs-官网安装包配置环境变量
node -v #安装webpack
npm install webpack -g #安装vue-cli
npm install vue-cli -g #新建项目
vue init webpack vuedemo #运行项目
npm run dev
npm install报错的
npm cache clean --force
二、生命周期

3、部署
npm run build
生成的dist内容直接以静态文件方式部署到服务器就OK;
build参数根据project.json的配置节点scripts确定;比如:npm run build:prod
通过webpack.DefinePlugin切换环境
new webpack.DefinePlugin({
'process.env': require('../config/xxx.env')
})
分析:
npm run build:prod --report
https://zhuanlan.zhihu.com/p/26710831
资源:
npm常用命令
https://www.cnblogs.com/itlkNote/p/6830682.html
常用插件
https://github.com/varHarrie/varharrie.github.io/issues/10
工具配置
{
"breadcrumbs.enabled": true,
"editor.tabSize": ,
"editor.renderWhitespace": "boundary",
"editor.cursorBlinking": "smooth",
"editor.minimap.renderCharacters": false,
"editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
"editor.fontLigatures": true,
"explorer.confirmDragAndDrop": false,
"extensions.autoUpdate": false,
"files.insertFinalNewline": true,
"git.autofetch": true,
"git.path": "F:\\Program Files\\Git\\cmd\\git.exe",
"search.exclude": {
"**/node_modules": true,
"**/dist": true
},
"typescript.locale": "en",
"window.titleBarStyle": "custom",
"window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
"window.zoomLevel": ,
"workbench.activityBar.visible": true,
"workbench.colorTheme": "Plastic - deprioritised punctuation",
"workbench.iconTheme": "vscode-great-icons",
"workbench.startupEditor": "newUntitledFile",
"eslint.autoFixOnSave": true,
"eslint.validate": ["javascript", "javascriptreact", "vue"],
"vsicons.projectDetection.autoReload": true,
"vsicons.dontShowNewVersionMessage": true,
"tslint.autoFixOnSave": true,
"debugwrapper.wrappers": {
"default": "console.log('$eSEL', $SEL)"
},
"prettier.tslintIntegration": true,
"cSpell.userWords": [
"Unmount"
],
"jest.autoEnable": false,
}
VSCode
vue:概要的更多相关文章
- Vue 2.6版本基础知识概要(一)
挂载组件 //将 App组件挂载到div#app节点里 new Vue({ render: h => h(App), }).$mount('#app') VueComponent.$mount ...
- vue安装概要以及vue测试工具
一.概述 1.安装node,去node官网 2.新建一个项目,通过npm init命令初始化,即创建一个package.json文件 3.用命令 npm install vue -g 全局安装vue( ...
- vue语法概要二
函数 用途 类别 v-html 用于输出html格式的数据 输出 v-bing 用于输出值 输出 v-model 双向绑定 输入和输出 v-if 逻辑判断 分支语句 v-else 同上 分支语句 v- ...
- vue基本语法概要(一)
先看两种代码,再进行讲解 第一种格式: <template > <div> <div v-for=" item in sites "> < ...
- Vue框架基础概要
Vue.js是什么? Vue.js(读音 /vjuː/,类似于 view 的读音)是一套构建用户界面(user interface)的渐进式框架.与其他重量级框架不同的是,Vue 从根本上采用最小成本 ...
- Vue:Promise概要
1.Promise中then是异步的 2.Promise 的then里面两个回调,默认第一个resolve,第二个reject:不会进入catch:如果只有一个回调则进入catch var p1=ne ...
- 前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定
一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...
- Spring MVC 学习总结(一)——MVC概要与环境配置
一.MVC概要 MVC是模型(Model).视图(View).控制器(Controller)的简写,是一种软件设计规范,用一种将业务逻辑.数据.显示分离的方法组织代码,MVC主要作用是降低了视图与业务 ...
- 前端MVC学习笔记(一)——MVC概要与angular概要、模板与数据绑定
一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...
随机推荐
- 剑指offer22:从上往下打印出二叉树的每个节点,同层节点从左至右打印。
1 题目描述 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 2 思路和方法 使用一个队列存放节点.先将根节点加入到队列中,然后循环遍历队列中的元素,遍历过程中,访问该节点的左右子节点,再将左 ...
- input的小技巧 清除自动记录
input 消除自动记忆功能 在html里就可以直接清除了<input type="text" autocomplete="off"> input ...
- python 之 数据库(数据库安装方法、基本sql语句、存储引擎)
第十章 数据库 10.1 数据库介绍 1.数据库相关概念 数据库服务器:本质就是一个台计算机,该计算机之上安装有数据库管理软件的服务端 数据库管理系统RDBMS:本质就是一个C/S架构的套接字软件 库 ...
- Acuntetix的安装与使用
1.下载软件压缩包文件,首先点击"Acunetix.Web.12.0.180911134.Retail.exe"安装最新版原程序 2.阅读并同意软件安装协议 3.设置登录信息,包括 ...
- springboot注册到consul中报错:Spring MVC found on classpath, which is incompatible with Spring Cloud
今天在做springboot整合成springCloud并注册到consul中时,发现若注册到consule中成功 则不能启动swagger,且不能提供任何API服务,要是能提供API服务则不能注册到 ...
- winserver2012远程桌面进入只有CMD窗口,无桌面解决方法
原因:.net framework4.5是Windows server图形化界面的基础,系统还原时只装了核心模式core,系统没有了图形界面当然只有cmd了 解决方法:使用dism命令需要将核心模 ...
- print函数用法总结
输出print函数总结: 1,字符串和数字类型 2,变量(数值,布尔,列表,字典) 3,格式化输出 格式化输出总结: (1)%:标记转换说明符的开始 (2)转换标志: - 表示左对齐:+ 表示在转换值 ...
- 解决 React-Native: Android project not found. Maybe run react-native android first?
在终端运行命令react-native run-android时报错Android project not found. Maybe run react-native android first? 解 ...
- Android笔记(十一) Android中的布局——网格布局
网格布局是Android4.0新增的布局管理器,因此需要在Android4.0之后的版本才可以使用,之前的平台使用该布局的话,需要导入相应的支持库. GridLayout的作用类似于HTML中的tab ...
- Qt中C++与QML交互
###main.c部分int main(int argc, char *argv[]){ QString info1 = "xxxxxxxxxxx"; QString ...