vue 概念与使用vue-cli脚手架快速构建项目
vue
定义:是一套构建用户界面的渐进式框架,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.
数据渲染机制:
核心:
- 响应式数据绑定(双向数据绑定) -》利用Object.defineProperty 中的setter/getter代理数据,监控对数据操作所产生的变化
- 组合式组件树布局 =》UI页面划分为组件树,相当于划分模块,有利于复用、扩展维护
具体内部流程图如下:
vue-cli
vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的。
vue-cli使用
安装vue-cli之前,需要先安装了vue和webpack,可参考《Vue + Webpack 实现SPA应用文档》
1、安装vue-cli
npm install -g vue-cli //全局安装vue-cli
vue init webpack projectName //生成项目名为projectName的模板,这里的项目名projectName随你自己写
cd projectName // 切换到项目目录下
npm install //初始化安装依赖
注意:Mac下安装:需要加权限sudo
sudo npm install -g vue-cli //全局安装vue-cli
vue init templateName projectName //创建一个基于 templateName 模板的新项目 projectName , templateName一般为 webpack
// For Vue 1.x use: vue init webpack#1.0 projectName
cd projectName // 切换到项目目录下
sudo npm install //初始化安装依赖
安装完成OK
生成目录如下:
然后执行
npm run dev
在浏览器打开http://localhost:8080,则可以看到欢迎页了。
但是这个只能在本地跑,在自己的服务器上访问
npm run build
会生成静态文件,在根目录的dist里,里面有个index.html,这是服务器访问的路径指定到这里就可以访问我们自己的项目了。但是我发现个问题就是生成index.html里引用的css和js的引用路径不对,这时候就需要自己修改一下配置了。
进入config/index.js
原来的配置的引用路径为
自己可更改为
这样就能正常访问了。
最新文章
- frxReport 设计 (mtm)
- linux crontab命令参数及用法详解--linux自动化定时任务cron
- Light OJ 1019 - Brush (V)(图论-dijkstra)
- NOIP 2001解题报告
- iOS Core Animation学习总结(3)--动画的基本类型
- Makefile与shell脚本的区别
- Linux学习之给指定用户发邮件
- UIViewController加载过程
- 大数据基础篇(一):联机分析处理(OLAP) 与 联机事务处理(OLTP)
- ssh外网穿透
- Android事件总线(四)源码解析otto
- MSSQL一种取代游标的方案
- LA 2218 Triathlon(半平面交)
- postman系列之批量执行接口测试用例
- 老徐FrankXuLei 受邀为花旗银行讲授《微软WCF服务分布式开发与SOA架构设计课程》
- 题目1460:Oil Deposit(递归遍历图)
- Reading lists for new LISA students(转)
- C++中运算符的优先级
- mysql update/delete in 子查询改写
- HTTP 错误 404.0 - Not Found 您要找的资源已被删除、已更名或暂时不可用。
热门文章
- Oracle 10046 event
- 小程序mpvue中动态切换echarts图表
- day41—JavaScript运动的停止条件
- 树的基本概念以及java实现二叉树
- 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第4节 ArrayList集合_18-练习三_按指定格式打印集合的方法
- 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_10 斗地主案例(双列)_1_斗地主案例的需求分析
- python 正则表达式 re.findall &;re.finditer
- ODBC Driver Development
- vue项目 引入js文件
- Python学习-第三天-面向对象编程基础