VUE__VUE-CLI
文章目录
- 一，Vue组件
- 1.1,什么是组件
- 1.2,全局组件
- 1.3，注意事项
- 1.4局部组件
- 1.5定义组件的方式
- 1.6定义组件的方式2
- 1.7获取动态元素
- 三，vue路由
- 1、什么是路由
- 2，入门
- 3，计算属性与watch
- 四，webpack打包
- 1、为什么需要打包
- 2、是什么
- 3、安装
- 4、Js打包-入门
- 5、Js打包-配置文件
- 6、加载器
- 7、实现
- 8、热更新web服务器
- 五、Vue-cli
- 1、认识
- 2、vue-cli快速创建webpack项目
- 3、运行
一，Vue组件
1.1,什么是组件
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件也可以表现为用 vue.js 特性进行了扩展的原生 HTML 元素。
一句话总结组件： 组件就是自定义标签，它内部存储了很多html代码
<body><mytag></mytag>
</body>
注意: mytag就是一个组件, 该组件必须通过Vue为mytag赋予一定的功能
1.2,全局组件
<!-- 引入 核心，就有 内置的vue--><script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body><div id ="app"><mycomponent></mycomponent><mycomponent></mycomponent><mycomponent></mycomponent></div>
</body><!--组件的认识：组件 (Component) 是 Vue最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码一句话总结组件： 组件就是自定义标签，它内部存储了很多html代码a.html b.html c.html1000 2000 3000这三个界面其中有公共的html代码是500行，组件就是把这500行代码抽成一个标签，然后让其它页面去使用该标签就可以了组件的分类：1.全局组件（在所有vue实例中(在它所挂载元素下面有效)有效）创建全局组件的语法格式：Vue.component("组件名",{template:"html元素"})2.局部组件（在自己vue实例中(在它所挂载元素下面有效)有效）--><script type="text/javascript">Vue.component("mycomponent",{// 必须要有 根 template:"我是全局组件
"})//挂载new Vue({el:"#app"})</script>
1.3，注意事项
<body><div id="app"><mycomponent></mycomponent></div>
</body>
<script type="text/javascript">Vue.component("mycomponent",{// 必须要有 根 template:"我是全局组件
撒可见度
"})//挂载new Vue({el:"#app"})
</script>
1.4局部组件
body><div id="app"><mycomponents></mycomponents><outercomponent></outercomponent></div><div id="app1"><mycomponents></mycomponents><outercomponent></outercomponent></div>
</body>
<script type="text/javascript">let outercomponent=Vue.component("outercomponent",{// 必须要有 根 template:"我是全局组件
撒可见度
"})//挂载new Vue({el:"#app",components:{//定义局部组件mycomponents:{template:"局部组件
"},//定义局部组件 ，引用已经创建 好的组件innercompoments:outercomponent}})new Vue({el:"#app1"})
</script>
1.5定义组件的方式
<div id="app"><!-- 全局组件--><outercomponent></outercomponent><br/><outercomponent></outercomponent><template><h2>测试</h2></template><!-- 局部组件--><innercompoments></innercompoments></div>
<!--定义组件面板
--><template id="mytemplate"><form action="" method="">username:<input type="text" name="username"><br/>username:<input type="text" name="username"><br/>username:<input type="text" name="username"><br/><input type="submit" value="提交"></form></template>
</body><script type="text/javascript">Vue.component("outercomponent",{// 面板 idtemplate:"#mytemplate"})//挂载new Vue({el:"#app",components:{//定义局部组件innercompoments:{template:"#mytemplate"},}})
</script>
1.6定义组件的方式2
<div id="app"><!-- 全局组件--><outercomponent></outercomponent><br/><outercomponent></outercomponent><!-- 局部组件--><innercompoments></innercompoments><script type="text/template"><h1>猜测是</h1></script></div><!--方式2和方式3的区别：方式3把script标签直接放到挂载的dom中它是不能被渲染的--><!-- 定义组件的模板方式3--><script id="mytemplate" type="text/template"><form action="" method="">username:<input type="text" name="username"><br/>username:<input type="text" name="username"><br/>username:<input type="text" name="username"><br/><input type="submit" value="提交"></form></form></script></body><script type="text/javascript">Vue.component("outercomponent",{// 面板 idtemplate:"#mytemplate"})//挂载new Vue({el:"#app",components:{//定义局部组件innercompoments:{template:"#mytemplate"},}})
</script>
1.7获取动态元素
<div id="app"><!-- 全局组件--><mycomponent></mycomponent><br/></div><!--方式2和方式3的区别：方式3把script标签直接放到挂载的dom中它是不能被渲染的--><!-- 定义组件的模板方式3--><template id="mytemplate" ><form action="" method=""><h2>{{name}}++ 的 {{age}}</h2></form></template>
</body><script type="text/javascript">Vue.component("mycomponent",{// 面板 idtemplate:"#mytemplate",data:function () {return{name:"萨克达",age:21,}}})//挂载new Vue({el:"#app",data:{name:"朵儿"}})
</script>
三，vue路由
1、什么是路由
路由是负责将进入的浏览器请求映射到特定的组件代码中。
简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址
2，入门
<!--路由js--><script type="text/javascript" src="node_modules/vue-router/dist/vue-router.min.js"></script>
</head>
<body><div id="app"><!-- 全局组件--><router-link to="/index">首页</router-link><router-link to="/product">产品</router-link><router-link to="/employee">员工</router-link><!-- 组件渲染位置 4.组件渲染的位置--><router-view></router-view><br/></div>
</body>
<!--路由： 路由是负责将进入的浏览器请求映射到特定的组件代码中url地址映射到组件（html代码）做路由：1.准备组件2.映射关系（url映射组件）3.告诉vue我要使用路由4.组件渲染的位置
-->
<script type="text/javascript">/* 1.准备组件*/let INDEX= Vue.component("index",{template:"首页
"})let PRODUCT =Vue.component("product",{template:"产品
"})let EMPLOYEE=Vue.component("employee",{template:"员工
"})/*2.映射关系（url映射组件）*/let router=new VueRouter({routes:[{path:"/index",component:INDEX},{path:"/product",component:PRODUCT},{path:"/employee",component:EMPLOYEE},]})//挂载/*3.告诉vue我要使用路由*/new Vue({el:"#app",router,})
</script>
3，计算属性与watch
body><div id="app">{{birth}}=={{saLay}}<input type="text" v-model ="message"><br/></div>
</body>
<
<script type="text/javascript">new Vue({el: "#app",data:{birthday:1429032123201, // 毫秒值message:""},computed:{birth(){return new Date(this.birthday).getFullYear()+"年"+new Date(this.birthday).getMonth()+"月";},saLay(){return 30*500+1500;}},watch:{message(newVal,oldVal){//主要监控值的变化console.debug("新值"+newVal)console.debug("老值"+oldVal)}}})
</script>
四，webpack打包
1、为什么需要打包
将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。
- 将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
- 将代码打包的同时进行混淆，提高代码的安全性。
2、是什么
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分
析，然后将这些模块按照指定的规则生成对应的静态资源
3、安装
本地安装：
npm install webpack --save-dev
npm install webpack-cli --save-dev
全局安装：–推荐使用 后面要用
npm install -g webpack
npm install -g webpack-cli
4、Js打包-入门
创建前端项目
npm init -y
5、Js打包-配置文件
webpack 命令就可以进行打包webpack.config.js ，该文件与项目根处于同级目录
var path = require("path");
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
}
}
6、加载器
webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。
loader 通过在 require() 语句中使用 loadername! 前缀来激活，或者通过 webpack 配置中的正则表达式来自动应用 -
vue-loader 转换vue组件 *.vue
css-loader 加载css文件
babel-loader 加载 ES2015+ 代码，然后使用 Babel 转译为 ES5
7、实现
步骤一：
npm install style-loader --save-dev
npm install css-loader --save-dev
a.js引入:
var a = "a模块";
var b = require('./b.js');console.log(b);require('../css/index.css')步骤三：在webpack.config.js文件引入下面代码var path = require("path");
module.exports = {entry: './web/js/a.js',output: {path: path.resolve(__dirname, './dist'),filename: 'bundle.js'},module: {rules: [{test: /\.css$/, //匹配文件规则use: ['style-loader', 'css-loader'] //匹配后使用什么加载器进行模块加载// webpack use的配置，是从右到左进行加载的},]}
}步骤四：打包：webpack
8、热更新web服务器
刚才的案例中,我们都是本地运行。webpack给我们提供了一个插件，可以帮我们运行一个web服务；
1）安装插件：npm install webpack-dev-server --save-dev
2）添加启动脚本
在package.json中配置script
"scripts": {"dev": "webpack-dev-server --inline --progress --config ./webpack.conf.js", },--inline：自动刷新
--hot：热加载
--port：指定端口
--open：自动在默认浏览器打开
--host：可以指定服务器的 ip，不指定则为127.0.0.1npm run dev/test
出现错误之后
https://www.cnblogs.com/gqx-html/p/10756388.html
https://www.cnblogs.com/laraLee/p/9174383.html"devDependencies": {"css-loader": "^3.1.0","style-loader": "^0.23.1","webpack": "^3.10.0","webpack-dev-server": "^2.9.7"
},在执行 npm install
五、Vue-cli
1、认识
在开发中，需要打包的东西不止是js、css、html。还有更多的东西要处理，这些插件和加载器如果我们一一去添加就会比较麻烦。
幸好，vue官方提供了一个快速搭建vue项目的脚手架：vue-cli
使用它能快速的构建一个web工程模板。
官网：https://github.com/vuejs/vue-cli
安装命令：npm install -g vue-cli
2、vue-cli快速创建webpack项目
vue init webpack
3、运行
npm run dev
npm run build 打包可以在服务器运行
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！