前端学习之路--vue（一）

最新推荐文章于 2024-05-04 22:06:16 发布

胡哥居士

最新推荐文章于 2024-05-04 22:06:16 发布

阅读量813

点赞数 1

分类专栏：前端开发 web前端文章标签： vue 前端 web前端前端框架 vue.js

本文链接：https://blog.csdn.net/qq_40707650/article/details/82947700

版权

前端开发同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

web前端

22 篇文章 1 订阅

订阅专栏

今日重点下一篇 vue（二）
* 运行起来Vue
* vue常用指令
* 组件的使用
什么是vue？

2014年vue诞生，2013年react诞生，2009年 angularjs诞生
Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。简而言之，Vue.js就是一个用于搭建类似于网页版知乎这种表单项繁多，且内容需要根据用户的操作进行修改的网页版应用。
作者===》尤雨溪，2016年9月3日加入阿里巴巴Weex团队，week是vue代码开发出来后可以在pc、安卓、iOS三端运用。
核心概念: 组件化双向数据流 (基于ES5中的defineProperty来实现的),IE9才支持
angular核心：模块化双向数据绑定(脏检测:一个数组（$watch）)
- 开发一个登陆的模块，登陆需要显示的头部、底部、中部
- 组件:组合起来的一个部件（头部、底部、中部）
- __细分代码__
+ 头部: 页面、样式、动态效果
+ 代码: template style script
框架对比，建议学完vue再看 https://cn.vuejs.org/v2/guide/comparison.html#React
数据流
* 1向：js内存属性发生改变，影响页面的变化
* 1向：页面的改变影响js内存属性的改变

单文件运行vue（第一个vue文件在下一篇显示）

什么是单文件？意 .vue 结尾的文件，。最终通过webpack也会编译成*.js在浏览器运行。vue文件模板：
```
<template>
	
</template>
<script>
	// js代码
	export default{

	}
</script>
<style>
/* 	css代码 */
</style>
```
* 内容： <template></template> + <script></script> + <style></style>
- 1:template中只能有一个根节点 2.x，也就相当于只能有一个Div：
```
<template>
	<div></div>
</template>
```
如果有两个根节点就会报错，如下：

但是除了只能有一个根节点其他写法和HTML一样，也就是第一个div下可以嵌套多个子节点。
- 2:script中按照 export default {配置} 来写
- 3:style中可以设置scoped属性，让其只在template中生效

以单文件的方式启动

什么是Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
为什要使用WebPack

今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

a:模块化，让我们可以把复杂的程序细化为小的文件;

b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；

c:scss，less等CSS预处理器

.........

这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的，这就为WebPack类的工具的出现提供了需求。
没有什么可以认识vue文件代码，所以要安装一些模块来识别vue代码，而且有的模块会依赖别的模块，所以我们安装的模块会比较多一点。
webpack找人来理解你的单文件代码 - vue-loader依赖vue-template-compiler,代码中依赖vue,
* 启动命令
* `..\\node_modules\\.bin\\webpack-dev-server --inline --hot --open`

第一个vue程序

单文件目录结构

所以，先建好这三个文件，index.html中是：

<html>
<head>
    <meta charset="UTF-8">
    <title>01_第一个vue程序启动</title>
</head>
<body>
    <!-- 1:在index.html中写上div id="app" app可以随意 -->
    <div id="app"></div>
    <!-- 以上内容是一个坑，未来vue编译好代码，往里边插入 -->
</body>
</html>

app.vue为：

<template>
    <div>
           我们的第一个vue程序
    </div>
<!--     <div>
        只能包含一个根节点 2.x以后
    </div> -->
</template>
<script>
    // export default {

    // }
</script>
<style></style>

main.js为：

//2:引入 Vue
import Vue from 'vue';
import App from './app.vue';



//3:创建一个Vue的实例，一般一个项目，大多就是一个vue实例来完成显示
new Vue({
    // el:'#app', //目的地
    // render:'dom结构'//渲染的内容
    el:'#app',
    render:function(creater){
        return creater(App); //App包含 template/script/style,最终生成DOM结构
    }
})

package.json

package.json 文件

管理本地安装 npm 包的最好方式就是创建 package.json 文件。

一个 package.json 文件可以有以下几点作用：作为一个描述文件，描述了你的项目依赖哪些包允许我们使用；“语义化版本规则”（后面介绍）指明你项目依赖包的版本；让你的构建更好地与其他开发者分享，便于重复使用。

package.json 如何创建

使用 npm init 即可在当前目录创建一个 package.json 文件：

如图所示，输入 npm init 后会弹出一堆问题，我们可以输入对应内容，也可以使用默认值。在回答一堆问题后输入 yes就会生成图中所示内容的 package.json 文件。

如果嫌回答这一大堆问题麻烦，可以直接输入 npm init --yes 跳过回答问题步骤，直接生成默认值的 package.json 文件。

package.json 的内容

package.json 文件至少要有两部分内容：“name” 全部小写，没有空格，可以使用下划线或者横线。“version” 后面用双引号引起的是版本号。这里给出一个示例：
```
{
  "name": "cms_project_27",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": ".\\node_modules\\.bin\\webpack-dev-server --inline --hot --open --port 9999",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer-loader": "^3.2.0",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.4",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^2.30.1",
    "less": "^2.7.2",
    "less-loader": "^4.0.5",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "vue-loader": "^13.0.4",
    "vue-template-compiler": "^2.4.2",
    "webpack": "^3.5.1",
    "webpack-dev-server": "^2.7.1"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "mint-ui": "^2.2.9",
    "moment": "^2.18.1",
    "vue": "^2.4.2",
    "vue-preview": "^1.0.5",
    "vue-router": "^2.7.0"
  }
}
```
其他内容：description：描述信息，有助于搜索 * main: 入口文件，一般都是 index.js * scripts：支持的脚本，默认是一个空的 test * keywords：关键字，有助于在人们使用 npm search 搜索时发现你的项目 * author：作者信息 * license：默认是 MIT * bugs：当前项目的一些错误信息.

webpack.config.js webpack属性配置

  const path = require('path')
    module.exports = {
        entry:{ main是默认入口,也可以是多入口
            main:'./src/main.js'
        },
        出口
        output:{
            filename:'./build.js', 指定js文件
            path: path.join(__dirname,'..','dist',)          最好是绝对路径
            代表当前目录的上一级的dist
        },
        module:{
            一样的功能rules:   webpack2.x之后新加的
            loaders:[       require('./a.css||./a.js')
                {test:/\.css$/,
                 loader:'style-loader!css-loader',
                 顺序是反过来的2!1
                },
                {
                 test:/\.(jpg|svg)$/,
                 loader:'url-loader?limit=4096&name=[name].[ext]',
                 顺序是反过来的2!1 
                 [name].[ext]内置提供的，因为本身是先读这个文件
                 options:{
                    limit:4096,
                    name:'[name].[ext]'
                 }
                }
            ]
        },

        plugins:[
            插件的执行顺序是依次执行的
            new htmlWebpackPlugin({
                template:'./src/index.html',
                })
                将src下的template属性描述的文件根据当前配置的output.path，将文件移动到该目录
        ]



    }

所以我们的总文件目录是
你可以多个项目用同一个node_modules,也可以每个项目配置一个node_moudules。一般在公司里面，为了减少文件大小，都是每个项目单独配置node_moudule。

计算器案例

这里我给出文件结构

node_modules目录一开始没有，不用管，cal.js为

var cal = {
    add:function(n1,n2){
        return n1+n2;
    }
}

export default cal;

index.html为

<!DOCTYPE html>
<html>
<head>
    <title>01_模块化计算机</title>
</head>
<body>
    <input type="text" name="" id="n1">  
    <input type="text" name="" id="n2"> 
    <button id="btn">=</button> 
    <input type="text" name="" id="result">
</body>
</html>

main.js为

// var cal = require("./cal.js");
import cal from "./cal.js";

document.getElementById('btn').onclick = function () {
    var n1 = document.getElementById('n1').value - 0;
    var n2 = document.getElementById('n2').value - 0;
    var sum = cal.add(n1,n2);
    document.getElementById('result').value = sum;
}

package.json为

{
  "name": "webpack_class",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev":".\\node_modules\\.bin\\webpack-dev-server --inline --hot --open --port 8888",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer-loader": "^3.2.0",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.4",
    "file-loader": "^0.11.2",
    "less": "^2.7.2",
    "less-loader": "^4.0.5",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "vue-loader": "^13.0.4",
    "vue-template-compiler": "^2.4.2",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.6.1"
  },
  "dependencies": {
    "html-webpack-plugin": "^3.2.0",
    "vue": "^2.4.2"
  }
}

webpack.config.js为

 const htmlWebpackPlugin = require('html-webpack-plugin');
    const path = require('path')
    module.exports = {
        entry:{ //main是默认入口,也可以是多入口
            main:'./src/main.js'
        },
        //出口
        output:{
            filename:'./build.js', //指定js文件
            path: path.join(__dirname,'dist')          //最好是绝对路径
            //代表当前目录的上一级的dist
        },
        module:{
            //一样的功能rules:   webpack2.x之后新加的
            rules:[       //require('./a.css||./a.js')
                {test:/\.css$/,
                 loader:'style-loader!css-loader',
                 //顺序是反过来的2!1
                },
                {
                 test:/\.(jpg|svg|png|gif)$/,
                 loader:'url-loader?limit=4096&name=[name].[ext]',
                 //顺序是反过来的2!1 
                 //[name].[ext]内置提供的，因为本身是先读这个文件
                 // options:{
                 //    limit:4096,
                 //    name:'[name].[ext]'
                 // }
                },{//处理ES6的js
                    test:/\.js$/,
                    loader:'babel-loader',
                    //排除 node_modules下的所有
                    exclude:/node_modules/,
                    options:{
                        presets:['es2015'],//关键字
                        plugins:['transform-runtime'],//函数
                    }
                }
            ]
        },

        plugins:[
            //插件的执行顺序是依次执行的
            new htmlWebpackPlugin({
                template:'./src/index.html',
                })
                //将src下的template属性描述的文件根据当前配置的output.path，将文件移动到该目录
        ]



    }

然后进入到01目录下，进入到cmd指令模式，输入 npm install ,然后按下enter键，这个表示安装package.jaon里的模块，也就是我们所要用到的模块，这是我自己配的package.json文件，可能与你们见到其他的不一样，然后在01目录下产生了一个node_modules目录，这是我们安装的模块目录，然后输入 npm run dev ,模拟测试结果会显示这个界面

这就表示打包成成功了，你可以进入浏览器访问http://localhost:8888/，这个端口好可以改变，默认是8080，

如图，在该文件里更换端口号，最后访问http://localhost:8888/后，出现此页面

输入数字，就可以进行加法运算了。

胡哥居士

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端学习之路--vue（一）

今日重点下一篇 vue（二） * 运行起来Vue * vue常用指令 * 组件的使用什么是vue？2014年vue诞生，2013年react诞生，2009年 angularjs诞生 Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。...
复制链接

扫一扫