VUE简述

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,Vue 被设计为可以自底向上逐层应用。

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

安装

1. 直接从https://vuejs.org/js/vue.min.js下载vue.min.js并用<script>标签引入。

2. 联网使用CDN,如<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

https://cdn.staticfile.org/vue/2.2.2/vue.min.js国内

https://unpkg.com/vue/dist/vue.js

https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

3. NPM方法

$ npm install -g vue --registry=https://registry.npm.taobao.org

# 全局安装 vue-cli

$ cnpm install --global vue-cli //

$npm install -g vue-cli --registry=https://registry.npm.taobao.org

# 创建一个基于 webpack 模板的新项目

$ vue init webpack my-project #配置,默认回车即可

依赖包都安装在node_modules中,编译出的可执行文件位于node_modules/.bin目录下。

目录结构 

目录/文件

说明

build

项目构建(webpack)相关代码

config

配置目录,包括端口号等。我们初学可以使用默认的。

node_modules

npm 加载的项目依赖模块,编译出的可执行文件位于.bin目录下。

src

这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:

  • assets: 放置一些图片,如logo等。

  • components: 目录里面放了一个组件文件,可以不用。

  • App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。

  • main.js: 项目的核心文件。

static

静态资源目录,如图片、字体等。

test

初始测试目录,可删除

.xxxx文件

这些是一些配置文件,包括语法配置,git配置等。

index.html

首页入口文件,你可以添加一些 meta 信息或统计代码啥的。

package.json

项目配置文件。

README.md

项目的说明文档,markdown 格式

 

组件

组件可以扩展HTML元素,封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树。在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例。 

注册一个全局组件语法格式如下:

Vue.component(tagName, options)

tagName 为组件名,options 为配置选项。注册后,我们可以使用以下方式来调用组件:

<tagName></tagName>

prop是子组件用来接受父组件传递过来的数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 "prop"

<div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量,即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”,稍后再
      作详细解释。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

        <script>
// 定义名为 todo-item 的新组件 
            Vue.component('todo-item', {
                props: ['todo'],
                template: '<li>{{todo.text}}</li>'
            })
            new Vue({
                el: "#app5",
                data: {
                    groceryList:[
                        {id: 0, text: "orange"},
                        {id: 1, text: "apple"},
                        {id: 2, text: "banana"}
                    ]
                }
            })
        </script>

 

路由

Vue.js路由允许通过不同的URL访问不同的内容。通过vue.js可以实现多视图的单页web应用。

Vue.js 路由需要载入vue-router 中文文档地址:vue-router文档

https://unpkg.com/vue-router/dist/vue-router.js
cnpm install vue-router

<router-link> 是一个组件,该组件用于设置一个导航链接,切换不同 HTML 内容。 to 属性为目标地址, 即要显示的内容。<router-link> 默认会被渲染成一个 `<a>`

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

// 0. 如果使用模块化机制编程,导入 Vue 和 VueRouter,要调用 Vue.use(VueRouter)
 
// 1. 定义(路由)组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
 
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]
 
// 3. 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写)相当于 routes: routes
})
 
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')
 
// 现在,应用已经启动了!

<router-link>相关属性

to:表示目标路由的链接。当被点击后,内部会立刻把to值传到router.push(),这个值可以是一个字符串或描述目标位置的对象。

replace:调用router.replace()而不是router.push(),导航后不会留下history记录。

append:设置append属性后,则在当前(相对)路径前添加其路径。

tag:把<router-link>渲染成某种标签,例如<li>

active-class:设置链接激活时使用的CSS类名。

exact-Active-class:配置当链接被精准匹配的时候应该激活的class

event:声明可以用来触发导航的事件,可以是一直字符串或一个包含字符串的数组。

Webpack

参考:webpack中文文档https://www.webpackjs.com/concepts/

Webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时,它会递归构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle

Webpack默认配置文件名为webpack.config.js,从webpack v4.0.0开始,可以不用引入一个配置文件。然而,webpack仍然是高度可配置的。四个核心概念:入口entry,出口outputloader,插件plugins

entry

入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。每个依赖项随即被处理,最后输出称之为bundles的文件中。可以在webpack配置中配置entry属性,来指定一个入口起点(或多个入口起点),默认值为./src

module.exports = {
  entry: './path/to/my/entry/file.js'
};

output

output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }};

loader

Loaderwebpack能够去处理那些非JavaScript文件(webpack自身只理解JavaScript)。Loader可以将所有类型的文件转换为webpack能够处理的有效模块,然后就可以利用webpack打包能力,对它们进行处理。本质上,webpack loader将所有类型的文件,转换为应用程序的依赖图(和最终的bundle)可以直接应用的模块。

在更高层面,在webpack的配置中loader有两个目标:

test属性,用于标识出应该被对应的loader进行转换的某个或某些文件。

use属性,标识进行转换时,应该使用哪个loader

const path = require('path');
const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }};

module.exports = config;

以上配置中,对一个单独的 module 对象定义了 rules 属性,里面包含两个必须属性:test 和 use

插件

Loader被用于转换某些类型的模块,而插件可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。

想要使用一个插件,你只需要 require() 它,然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件,这时需要通过使用 new 操作符来创建它的一个实例。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

模式

通过选择 development 或 production 之中的一个,来设置 mode 参数,可以启用相应模式下的 webpack 内置的优化。

module.exports = {
  mode: 'production'
};

Webpack-dev-server

参考:webpack-dev-server使用方法

Webpack-dev-server启动一个使用expressHttp服务器,作用为伺服(或监控)资源文件。这个HTTP服务器和client使用websocket通讯协议,原始文件作出改动后,webpack-dev-server会实时地编译,但是最后编译的文件并没有输出到目标文件(默认bundle.js),而是都保存在内存中。

--content-base用于指定伺服的directory。可通过在webpack.config.js中执行publicPATH指定base路径。

--quiet 控制台中不输出打包的信息

--compress 开启gzip压缩

--progress 显示打包的进度

应用

网页应用

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
</html>

网页显示:Hello Vue.js!

Vscode配置.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [

        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            "file": "index.html"
        }
    ]
}

 

参考:

  1. Vue中文文档 https://cn.vuejs.org/v2/guide/

  2. Runoob vue教程 https://www.runoob.com/vue2/vue-tutorial.html

  3. https://github.com/vuejs/vue

  4. Vue -渐进式JavaScript框架

  5. webpack中文文档https://www.webpackjs.com/concepts/

  6. vue中使用localStorage存储信息  jwt(jwt也可存储到cookie中)

posted @ 2020-07-05 18:43  yuxi_o  阅读(572)  评论(0编辑  收藏  举报