4、vueJs基础知识04
简单的目录结构:
|-index.html
|-main.js 入口文件
|-App.vue vue文件(组件),官方推荐命名法(首字母大写)
|-components 组件存放的文件夹
|-package.json 工程文件(项目依赖、名称、配置)
npm init --yes 生成
|-webpack.config.js webpack配置文件
ES6: 模块化开发
导出模块:
export default {}
引入模块:
import 模块名 from 地址
--------------------------------------------
webpak准备工作:
cnpm install webpack --save-dev (不带服务器)
cnpm install webpack-dev-server --save-dev (带服务器)
App.vue -> 变成正常代码 vue-loader@8.5.4
cnpm install vue-loader@8.5.4 --save-dev
cnpm install vue-html-loader --save-dev
vue-html-loader、css-loader、vue-style-loader(行内的css样式)、
vue-hot-reload-api@1.3.2(组件内的js)
babel-loader
babel-core(核心语法)
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime
最最核心:
vue下载
生产依赖和开发依赖是通过下载的命名区分的 --save-dev(开发依赖)
--save(生产依赖)
最后发布上线时是运行build命令,将所有生产的文件及依赖打包压缩到build.js中
如何运行此项目
1.npm install 或者cnpm install 安装依赖
2.npm run dev 执行命令
->package.json
"scripts":{
"dev":"webpack-dev-server --inline --hot --port 8082"
}
路由配合vue-loader使用
1. 下载vue-router模块
cnpm install vue-router@0.7.13
2. import VueRouter from 'vue-router'
3. Vue.use(VueRouter);
4. 配置路由
var router=new VueRouter();
router.map({
路由规则
})
注意:vue路由规则可以单独抽出来放到一个文件中使用 router.config.js
5. 开启
router.start(App,'#app');
注意:
之前: index.html -> <app></app>
现在: index.html -> <div id="app"></div>
App.vue -> 需要一个 <div id="app"></div> 根元素
项目发布上线
npm run build
vue-cli 脚手架
vue-cli——vue脚手架
帮你提供好基本项目结构
本身集成很多项目模板:
simple 个人觉得一点用都没有
webpack 可以使用(大型项目)
Eslint 检查代码规范,
单元测试
webpack-simple 个人推荐使用, 没有代码检查 (适用于中小型项目)√
基本使用流程
1. npm install vue-cli -g 安装 vue命令环境(全局安装)
验证安装ok?
vue --version
2. 生成项目模板
vue init <模板名> 本地文件夹名称
模板名就是simple、webpack、webpack-simple这些模板
3. 进入到生成目录里面
cd xxx
npm install
4. npm run dev
4、vueJs基础知识04的更多相关文章
- vue面试题整理vuejs基础知识整理
初级参考 1.v-show 与 v-if 区别 v-show 是css隐藏,v-if是直接销毁和创建,所以频繁切换的适合用v-show 2.计算属性和 watch 的区别 计算属性是自动监听依赖值的变 ...
- 6、vueJs基础知识06
vue动画 transition 之前1.0版本是以 属性的形式展示的 <p transition="fade"></p> .fade-transition ...
- 1、vueJs基础知识01
vue是框架,vue.js是vue框架的核心js库 库:是一个封装好的特定的方法的集合,提供给开发者使用,库没有控制权,控制权在使用者手中.代表:jQuery.underscore.util 框架:框 ...
- Android基础知识04—Activity活动之间传递数据
------活动之间传递数据------ 向下一个活动传递数据: Intent中提供了一系列的putExtra()方法,可以把数据暂存到Intent中,启动另一个活动的时候就可以取出来. 代码: (存 ...
- 7、vueJs基础知识07
UI组件库 element-ui和mint-ui 其实都是借鉴了bootstrap bootstrap: 由twitter 开源 简洁.大方 官网文档https://www.bootcss.com/ ...
- 5、vueJs基础知识05
vue2.0相比于1.0的变化 1.在每个组件模板中,不再支持片段代码,需要一个根元素包裹 组件中模板: 之前: <template> <h3>我是组件</h3>& ...
- 3、vueJs基础知识03
vue过渡(动画) 本质走的css3: transtion ,animation <div id="div1" v-show="bSign" transi ...
- 2、vueJs基础知识02
vue生命周期: 钩子函数: created -> 实例已经创建 √ beforeCompile -> 编译之前 compiled -> 编译之后 ready -> 插入到文档 ...
- python基础知识0-4
collection 他是对字典 元组 集合 进行加工的 是计数器 无论 深 ,浅 ,赋值 拷贝 内存地址都不变 赋值也是拷贝的一种 拷贝分两类数字 字符串 另一类: 列表 字典 元组 这一类还分两 ...
随机推荐
- Python学习日记(六) 浅深copy
浅深copy即完全复制一份和部分复制一份 浅深copy在列表数据量较大时不建议使用,比较消耗内存资源 1.赋值运算 l1 = [1,'s',[1,2,3]] l2 = l1 print(id(l1), ...
- c# System.Collections接口图
- k8s安装之nginx.yaml
这里两个nginx.一个是用来测试最简单的集群的. 另一个是用来作grafana,prometheus,dashboard前端安全展示的. 简单版 apiVersion: apps/v1 kind: ...
- 思想家:潘石屹学python
1.python在一些算法,图像处理,机器视觉方面越来越重要 2.计算机语言像英语一样,渐渐成为一种非专业技术,不能成为专业,而只能成为一种工具 3.想发挥工具价值,需要与别的专业结合,例如潘总的房地 ...
- tensorflow 与cuda、cudnn的对应版本关系
来源:https://www.cnblogs.com/zzb-Dream-90Time/p/9688330.html
- java.lang.RuntimeException: org.springframework.dao.DuplicateKeyException:
java.lang.RuntimeException: org.springframework.dao.DuplicateKeyException: ### Error updating databa ...
- python之钉钉机器人zabbix报警
转自:https://blog.51cto.com/m51cto/2051945 首先在钉钉群聊里添加一个自定义的机器人 并复制webhook的内容 https://oapi.dingtalk.com ...
- jmeter 压测工具安装及使用
linux下jmeter安装: 1. 下载JMeter官方网站下载最新版本: http://jmeter.apache.org/download_jmeter.cgi ,目前最新版是Apache JM ...
- 通过php安装Imagick扩展给动态gif图片打水印
通过php安装Imagick扩展给动态gif图片打水印 一直以来php处理图片都是以gd为主流,直到近些年Imagick的使用才渐渐变多. gd通常用来缩放图片,给图片打水印等基本功能,对于复杂效果如 ...
- Dubbo源码分析:Dubbo协议解码
Dubbo协议解码时序图