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. ...
随机推荐
- Python22之lambda表达式
一.Lambda表达式的概念和意义 lambda表达式有称为隐函数,它的定义过程由形参和要返回的表达式组成,它相对于一般函数而言具有以下优势: 1.免去了函数定义的过程,代码变得更加精简 2.省却函数 ...
- vue导入css,js和放置html代码
使用场景:我是从网上找的html前端页面模板,导入找的模板中的css和js到vue中使用. 1.在main.js中全局导入css和js import '@/assets/css/main.css' i ...
- Codeforces Round #576 (Div. 1) 简要题解 (CDEF)
1198 C Matching vs Independent Set 大意: 给定$3n$个点的无向图, 求构造$n$条边的匹配, 或$n$个点的独立集. 假设已经构造出$x$条边的匹配, 那么剩余$ ...
- idea下spring boot jpa写原生sql的时候,报Cannot resolve table错误
错误如图 打开View→Tool Windows→Persistence选项 在弹出的Persistence窗口的项目上右键,选择Generate Persistence Mapping→By Dat ...
- Java Comparable与Comparator区别
1,两种接口的展示 下面的程序是两个类各自实现了Comparable接口.Comparator接口 package com.cnblogs.mufasa.Solution; import java.u ...
- Centos7阿里云安装OpenProject-亲测
10/182019年10月18日13:50 参考 <https://ywnz.com/linuxyffq/4085.html> 说在前头:网上有各种教程,包括官方自己的教程,在阿里云服务器 ...
- nginx 反向代理配置(一)
文章参考:https://blog.csdn.net/physicsdandan/article/details/45667357 什么是代理? 代理在普通生活中的意义就是本来 ...
- 关于Ad-hoc
Ad-hoc是wifi的一个模式,依托普通无线局域网802.11家族.网络中所有结点的地位平等,无需设置任何的中心控制结点,省去了无线中介设备AP.比如一台电脑建立了一个网络,这个时候加入了两台电脑. ...
- testlink关联redmine设置
Testlink关联Redmine 公司用testlink对测试用例进行维护,redmine关系项目及bug,所以为了方便期间,将Testlink关联Redmine,方便测试用例执行后,在redmin ...
- 每日一题-——LeetCode(807)保持城市天际线
题目描述: 在二维数组grid中,grid[i][j]代表位于某处的建筑物的高度. 我们被允许增加任何数量(不同建筑物的数量可能不同)的建筑物的高度. 高度 0 也被认为是建筑物.最后,从新数组的所有 ...