VUE简述

时间：2020-07-05 19:31:26 阅读：58 评论：0 收藏：0 [点我收藏+]

标签：ant meta node 目录结构实例 test list cli cloud

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，出口output，loader，插件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

Loader让webpack能够去处理那些非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启动一个使用express的Http服务器，作用为伺服（或监控）资源文件。这个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"
        }
    ]
}

参考：

Vue中文文档 https://cn.vuejs.org/v2/guide/
Runoob vue教程 https://www.runoob.com/vue2/vue-tutorial.html
https://github.com/vuejs/vue
Vue -渐进式JavaScript框架
webpack 中文文档https://www.webpackjs.com/concepts/

VUE简述

标签：ant meta node 目录结构实例 test list cli cloud

原文地址：https://www.cnblogs.com/embedded-linux/p/13247151.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行