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
转载于:https://www.cnblogs.com/gopark/p/11027278.html
4、vueJs基础知识04相关推荐
- 6、vueJs基础知识06
vue动画 transition 之前1.0版本是以 属性的形式展示的 <p transition="fade"></p> .fade-transition ...
- 静态时序分析基础知识04
时钟特性 在同步电路设计中,各功能逻辑单元之间的数据传输都由一个同步信号控制,这个执行统一指挥的信号就是时钟信号. 时钟的时序特性主要分为时钟周期.时钟占空比.时钟转换时间.时钟延迟.时钟偏斜和时钟抖 ...
- 3、vueJs基础知识03
vue过渡(动画) 本质走的css3: transtion ,animation <div id="div1" v-show="bSign" transi ...
- 数据可视化系列-04数据大屏基础知识
文章目录 5.销售数据看板 5.1 了解数据大屏基础知识 1.数据大屏简介: 2.数据大屏使用场景 3.数据大屏分类 5.2 数据大屏的设计: 1.大屏前端设计流程 2.数据大屏设计尺寸解析 3.可视 ...
- Linux系统编程——进程基础知识
Linux系统编程--进程基础知识 1.程序和进程 程序,是指编译好的二进制文件,在磁盘上,不占用系统资源(cpu.内存.打开的文件.设备.锁-) 进程,是一个抽象的概念,与操作系统原理联系紧密.进程 ...
- linux基础知识_压缩—进程管理-网络管理-ftp-nfs-ssh-scp
linux基础知识_压缩-进程管理-网络管理-ftp-nfs-ssh-scp 1.压缩包管理 gzip .gz格式的压缩包,不打包,分别压缩,原文件消失 bzip2 .bz2格式的压缩包,原文件不会消 ...
- SEO基础知识8大精华文章之第三篇 SEO的历史(连载)
最近看了28推赵显明的博客上关于SEO基础知识的介绍,写的很好文章,不禁特别想分享给大家看,希望大家可以喜欢,这一系列已经连载了3篇了,我会尽快连载完,让大家尽快可以看完这些精心纂写的文章.这里我特别 ...
- python编程基础知识体系_最新版 17 幅思维导图:Python 编程之核心知识体系
原标题:最新版 17 幅思维导图:Python 编程之核心知识体系 导读:本文主要涵盖了 Python 编程的核心知识,展示了一系列思维导图,主要就 Python 核心基础知识进行了细致梳理.无论你是 ...
- python基础知识总结-python编程语言基础知识总结
原标题:python编程语言基础知识总结 今天给大家讲解python语言基础~~ 01.python核心数据类型 整型数 int:整数是不带有小数部分的数字 浮点型数 float:浮点数是带有小数部分 ...
- java基础知识之初识java
java基础知识之初识java JAVA基础课后总结 一 1.计算机程序 定义:程序(Program)是为实现特定目标或解决特定问题而用计算机语言编写的命令序列的集合. 2.指令 定义:指令就是指示机 ...
最新文章
- ASP.NET实现数据图表
- __attribute__ 总结
- C++中各种智能指针的实现及弊端(一)
- HTML中小meta的大作用
- JSON.parse 解析json字符串时,遇换行符报错
- python爬虫ip代理池_爬虫教程-Python3网络爬虫开发——IP代理池的维护
- 【upstream】Nginx配置upstream实现负载均衡
- kubernets 集群和本地环境联调环境打通工具kt-connect
- 哈夫曼树以及哈夫曼编码python
- 【分享】浅析Quora的技术架构
- 2010-11-25
- 再续2014年网页设计趋势
- 单片机led数码管显示c语言,各位大神,如何用C语言实现在数码管上实现1234同时亮...
- Rsyslog Queue调优
- python美女源代码_python程序员爬取百套美女写真集,同样是爬虫,他为何如此突出...
- Latex中将图例(图1:)改为(图1-1)
- 小程序开发工具绑定服务器,微信小程序绑定到第三方平台流程
- python 学术论文,python论文_python 论文_python
- 树莓派(USB麦克风和麦克风阵列) 录音和播放
- github.global.ssl.fastly.net hosts
热门文章
- cassandra 3.x官方文档(5)---探测器
- King's Quest - poj 1904(强连通分量+外挂输入输出)
- jquery serialize 和 console 漫谈
- 使用EntityFramework连接 Mysql
- gb2312和utf8 转换
- 关于find指令的一点使用小心得 II
- C#算法练习,求e,求π
- 序列化和反序列化(八)——Externalizable接口
- 元注解@interface的理解使用
- c# 存储图片到oracle,c# winform 读取oracle中blob字段的图片并且显示到pictureBox里 保存进库...