VUE__VUE-CLI

最新推荐文章于 2024-08-08 19:51:49 发布

RyFit

最新推荐文章于 2024-08-08 19:51:49 发布

阅读量332

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/qq_45619439/article/details/103787004

版权

VUE 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一，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.html
        1000                2000                 3000
        这三个界面其中有公共的html代码是500行，组件就是把这500行代码抽成一个标签，然后让其它页面
        去使用该标签就可以了

        组件的分类：
            1.全局组件（在所有vue实例中(在它所挂载元素下面有效)有效）
                创建全局组件的语法格式：
                        Vue.component("组件名",{
                            template:"html元素"
                        })

            2.局部组件（在自己vue实例中(在它所挂载元素下面有效)有效）
        -->
        <script type="text/javascript">
            Vue.component("mycomponent",{
                // 必须要有 根 <h1>
                template:"<h1>我是全局组件</h1>"
            })
            //挂载
            new Vue({
                el:"#app"
            })
        </script>

1.3，注意事项

<body>
        <div id="app">
            <mycomponent></mycomponent>
        </div>
</body>
<script type="text/javascript">
    Vue.component("mycomponent",{
        // 必须要有 根 <div>
        template:"<div><h1>我是全局组件</h1><h2>撒可见度</h2></div>"
    })
    //挂载
    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",{
        // 必须要有 根 <h1>
        template:"<div><h1>我是全局组件</h1><h2>撒可见度</h2></div>"
    })
    //挂载
    new Vue({
        el:"#app",
        components:{
            //定义局部组件
            mycomponents:{
                template:"<h1>局部组件</h1>"
            },
            //定义局部组件 ，引用已经创建 好的组件
            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",{
        //  面板 id
        template:"#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",{
        //  面板 id
        template:"#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}}++ 的&emsp;{{age}}</h2>
            </form>
        </template>
</body>

<script type="text/javascript">
    Vue.component("mycomponent",{
        //  面板 id
        template:"#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:"<h1>首页</h1>"
   })
   let PRODUCT =Vue.component("product",{
       template:"<h1>产品</h1>"
   })
   let EMPLOYEE=Vue.component("employee",{
       template:"<h1>员工</h1>"
   })
   /*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.1

npm 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