精华内容
下载资源
问答
  • vue编写一个简易网站 井字游戏 (Tic-Tac-Vue) Tic-Tac-Vue is a simple JavaScript Single Page Application (SPA) written with Vue, Vuex and Vue Router. Its goal is to be a "case study" for beginners who ...

    vue编写一个简易网站

    井字游戏 (Tic-Tac-Vue)

    Tic-Tac-Vue is a simple JavaScript Single Page Application (SPA) written with Vue, Vuex and Vue Router. Its goal is to be a "case study" for beginners who want to learn Vue and its powerful ecosystem.

    Tic-Tac-Vue是用Vue,Vuex和Vue Router编写的简单JavaScript单页应用程序(SPA)。 它的目标是成为想要学习Vue及其强大生态系统的初学者的“案例研究”。

    tic-tac-vue

    方法论 (Methodologies)

    In this project I adopted two methodologies I currently use in MotorK (the company I work with) to have a better factored code and organized source files: BEM and Atomic Design.

    在这个项目中,我采用了目前在MotorK (与我合作的公司)中使用的两种方法,以具有更好的分解代码和有组织的源文件:BEM和Atomic Design。

    边界元 (BEM)

    BEM (which means Block Element Modifier) is a methodology that helps you to create reusable components in front-end development. It's all about splitting your CSS classes using Blocks, Elements and Modifiers. The final DOM could be verbose, but you will have a better factored source code and, because of you don't have to nest CSS classes, your CSS bundle will result less heavy.

    BEM (即块元素修饰符)是一种可以帮助您在前端开发中创建可重用组件的方法。 这一切都是关于使用BlocksElementsModifiers拆分CSS类的。 最终的DOM可能很冗长,但是您将拥有更好的分解源代码,并且由于不必嵌套CSS类,因此CSS包的重量将减少。

    To read more about BEM pattern, click here.

    要了解有关BEM模式的更多信息,请单击此处

    原子设计 (Atomic Design)

    Atomic Design is a methodology for creating design systems. Similarly to chemistry, you can organize your components file (in this scenario Vue Single File Components) using atoms, molecules and organisms.

    原子设计是用于创建设计系统的方法。 与化学类似,您可以使用原子分子有机体来组织组件文件(在这种情况下为Vue单个文件组件)。

    原子 (Atoms)

    Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.

    原子是物质的基本组成部分。 应用于Web界面的原子是我们HTML标签,例如表单标签,输入或按钮。

    分子 (Molecules)

    Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound.

    分子是键合在一起的原子团,是化合物的最小基本单元。

    生物体 (Organisms)

    Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.

    有机体是连接在一起以形成相对复杂,截然不同的界面部分的一组分子。

    To read more about Atomic Design pattern, click here.

    要了解有关原子设计模式的更多信息,请单击此处

    (This project doesn't have organisms: it only has atoms, molecules and pages.)

    ( 该项目没有生物:它只有原子,分子和页面。 )

    安装 (Install)

    You can install Tic-Tac-Vue cloning the project:

    您可以安装Tic-Tac-Vue克隆项目:

    git clone https://github.com/Sanfra1407/tic-tac-vue.git

    then install npm dependencies:

    然后安装npm依赖项:

    npm install

    用法 (Usage)

    Since this project has been developed with the amazing Vue-CLI, you can use its own integrated CLI commands to serve or build the application.

    由于此项目是使用出色的Vue-CLI开发的 ,因此您可以使用其自己的集成CLI命令来服务或构建应用程序。

    启动开发服务器 (Start dev server)

    npm run serve

    编译并最小化生产 (Compiles and minifies for production)

    npm run build

    整理和修复文件 (Lints and fixes files)

    npm run lint

    翻译自: https://vuejsexamples.com/a-simple-tic-tac-toe-game-written-in-vue/

    vue编写一个简易网站

    展开全文
  • modules八、查看完整的目录结构和编写vue代码部分九、运行vue程序十、配置HTML支持.vue后缀的文件十一、通过CDN引入Vue.js或下载引入Vue.js十二、编写第一个Vue程序 一、认识Vue Vue是一套用于构建用户界面的渐进式...

    一、认识Vue

    Vue是一套用于构建用户界面的渐进式框架。Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

    MVVM模式的实现者

    • Model:模型层,这里表示JavaScript对象
    • View:视图层,这里表示DOM(HTML操作的元素)
    • ViewModel:连接视图和数据的中间件,Vue.js就是MVVM中的ViewModel层的实现者

    在MVVM架构中,是不允许数据和视图直接通信的,只能通过ViewModel来通信,而ViewModel就是定义了一个Observer观察者。

    • ViewModel能够观察到数据的变化,并对视图对应的内容进行更新
    • ViewModel能够监听到视图的变化,并能够通知数据发生改变

    因此,Vue.js就是一个MVVM的实现者,核心就是实现了DOM监听与数据绑定。

    Vue.js的优势

    • 轻量级,体积小是一个重要指标。Vue.js压缩后只有20多kb
    • 移动优先。更适合移动端,比如移动端的Touch事件
    • 易上手,学习曲线平稳,文档齐全
    • 吸取了Angular(模块化)和React(虚拟DOM)的长处,并拥有自己独特的功能。如:计算属性
    • 开源,社区活跃度高

    二、安装node.js

    方式一:下载软件包安装
    下载node.js:
    https://nodejs.org/zh-cn/
    在这里插入图片描述
    方式二:使用brew安装

    brew install node.j
    node -v
    v15.12.0
    npm -v
    7.6.3
    

    三、安装淘宝npm镜像和vue脚手架

    #安装npm镜像
    npm i -g cnpm --registry=https://registry.npm.taobao.org
    
    #安装脚手架
    npm i -g vue-cli
    
    #查看安装版本
    vue -V
    2.9.6
    

    四、安装webpack

    cnpm install -g webpack
    

    五、安装vue插件

    手动下载vue版本:注意下载IDEA对应版本的vue
    https://plugins.jetbrains.com/plugin/9442-vue-js/versions
    在这里插入图片描述
    解压压缩包,把Vue.js文件复制到IDEA文件夹plugins中
    在这里插入图片描述
    重新启动IDEA

    六、创建vue项目

    vue init webpack firstvue
    

    在这里插入图片描述

    七、创建项目依赖包文件夹nodo_modules

    cd /Users/fei.yang4/JavaProject/vue/firstvue
    cnpm install
    

    八、查看完整的目录结构和编写vue代码部分

    查看完整目录结构:
    在这里插入图片描述
    编写vue代码部分:
    在这里插入图片描述

    九、运行vue程序

    #进入项目目录下
    cd /Users/fei.yang4/JavaProject/vue/firstvue
    
    cnpm run dev
    

    在这里插入图片描述
    查看页面
    在这里插入图片描述

    十、配置HTML支持.vue后缀的文件

    在这里插入图片描述

    十一、通过CDN引入Vue.js或下载引入Vue.js

    • 方法一:直接CDN引入
    <!--开发环境版本,包含了有帮助的命令行警告-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--生产环境版本,优化了尺寸和速度-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    

    十二、编写第一个Vue程序

    在这里插入图片描述

    <!--vue.html-->
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>helloVuejs</title>
    </head>
    <body>
    <!--这部分div被Vue接管了-->
      <div id = app>
        {{message}}
      </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    const app = new Vue({
        el: '#app',	//el表示需要Vue接管的区域id
       data: {
          message: '一定要学好vue'
       }
      })
    </script>
    </body>
    </html>
    

    查看页面
    在这里插入图片描述

    展开全文
  • 文章目录系列文章目录环境搭建一、编写一个Hello Vue程序二、编写一个Vue组件2.1 使用Vue.component方式的缺点三、使用脚手架Vue CLI总结 环境搭建 浏览器:Chrome IDE: VS Code Node.js 10+,npm 一、编写...

    系列文章目录

    Vue基础篇一:编写第一个Vue程序


    环境搭建

    • 浏览器:Chrome
    • IDE: VS Code
    • Node.js 10+,npm

    一、编写第一个Hello Vue程序

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <title></title>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" type="text/css" media="screen" href="main.css">
            <script src="main.js"></script>
        </head>
        <body>
            <div id="app">
                {{message}}
            </div>
            <!--官方推荐: 开发环境版本,包含了有帮助的命令行警告 -->
            <script src="https://cdn.jsdelivr.net/npm/vue"></script>
            <script>
                var app=new Vue({
                    el: '#app',
                    data: {
                        message: 'hello Vue!',
                    }
                })
            </script>
            </div>
        </body>
    </html>
    

    在这里插入图片描述

    二、编写第一个Vue组件

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" media="screen" href="main.css">
        <script src="main.js"></script>
    </head>
    
    <body>
        <div id="app">
            {{message}}
            <ol>
                <todo-list v-for="item in list" v-bind:todo="item" v-bind:key="item.id"></todo-list>
            </ol>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            Vue.component('todo-list', {
                props: ['todo'],
                template: '<li class="text">{{todo.text}}</li>'
            })
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'hello Vue!',
                    list: [{
                        id: 0,
                        text: '读书'
                    }, {
                        id: 1,
                        text: '写字'
                    }, {
                        id: 2,
                        text: '看电视'
                    }
                    ]
                }
            })
        </script>
        </div>
    </body>
    
    </html>
    

    在这里插入图片描述

    2.1 使用Vue.component方式的缺点

    • 全局定义:强制要求每个component中的命名不得重复
    • 字符串模板:缺乏语法高亮,在HTML有多行的时候,需要用到“\”
    • 不支持css:意味着当HTML和JavaScript组件化时,css无效
    • 不支持构建:只能使用HTML和ES5 JS,不能使用预处理器等

    三、使用脚手架Vue CLI

    • 通过脚手架创建一个Hello World程序
    > npm install -g @vue/cli
    > vue create hello-world
    
    • 选择版本
      在这里插入图片描述
    • 选择包的管理方式:
      在这里插入图片描述
    • 成功创建项目
      在这里插入图片描述
    • 添加一个单文件组件
      在这里插入图片描述
    <!-- TodoItem.vue -->
    <template>
      <li class="text">{{ todo.text }}</li>
    </template>
    <script>
    export default {
      props: ["todo"],
    };
    </script>
    
    <style scoped>
    .text {
      color: #2c3e50;
    }
    </style>
    
    • 修改App.vue与HelloWorld.vue
    <!-- HelloWorld.vue -->
    <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      props: {
        msg: String
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h3 {
      margin: 40px 0 0;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    </style>
    
    
    <!-- app.vue -->
    <template>
      <div id="app">
        <img alt="Vue logo" src="./assets/logo.png" />
        <HelloWorld msg="Hello Vue!" />
        <ol>
          <todo-item
            v-for="item in list"
            v-bind:todo="item"
            v-bind:key="item.id"
          ></todo-item>
        </ol>
      </div>
    </template>
    
    <script>
    import HelloWorld from "./components/HelloWorld.vue";
    import TodoItem from "./components/TodoItem.vue";
    
    export default {
      name: "App",
      data() {
        return {
          list: [
            {
              id: 0,
              text: "读书",
            },
            {
              id: 1,
              text: "写字",
            },
            {
              id: 2,
              text: "看电视",
            },
          ],
        };
      },
      components: {
        HelloWorld,
        TodoItem,
      },
    };
    </script>
    
    <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
    
    
    • 运行程序
      在这里插入图片描述

    总结

    • 我们使用了Vue.js框架编写了第一个Vue程序及组件。
    • Vue官方给我们提供了脚手架,使用 vue-cli 可以快速创建 vue 项目,同时支持编写单文件组件。
    展开全文
  • 编写一个简单的Vue-router动态路由实例1.预计实现目标2.编写动态路由实例2.1安装vue-router2.2创建对应vue组件2.3在router文件夹index.js文件2.4编写app.vue文件3.测试 1.预计实现目标 点击用户按钮之后,URL上回...

    1.预计实现目标

    点击用户按钮之后,URL上回动态获取后面的pp字段。
    在这里插入图片描述

    2.编写动态路由实例

    2.1安装vue-router

    我这里是使用vue脚手架的时候自动安装了vue-router的,所以不用再安装。

    2.2创建对应vue组件

    <template>
      <div>
        <p>我是User</p>
        <p>{{userId}}</p>  //获取下面的userId计算属性
      </div>
    </template>
    
    <script>
    export default {
      name: "User",
      computed: {
        userId() {
          return this.$route.params.userId   //$route为当前组件下活跃的那个组件对象
        }
      }
     }
    </script>
    
    <style scoped>
    
    </style>
    
    

    2.3在router文件夹index.js文件

    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import Home from "../components/Home";
    import About from "../components/About";
    import User from "../components/User";  //导入user组件
    Vue.use(Router)
    const routes = [
      {
        path: '/',
        redirect: '/Home'
      },
      {
        path: '/Home',
        component: Home
      },
      {
        path: '/About',
        component: About
      },
      {
        path: '/User/:userId',  //使用:动态绑定userId属性,这里的userId可以随便取名字,只要this.$route.params.userId这里也动态改变就行
        component: User       //路由到这个User组件
      }
    ]
    
    
    export default new Router({
      routes,     //绑定routes对象,注意这里必须是这个routes名字
      mode: 'history',   //使用history的方式改变URL
      linkActiveClass:'active'
    })
    
    

    2.4编写app.vue文件

    <template>
      <div>
        <router-link to="/Home" tag="button">首页</router-link>  //绑定路由事件,使用to关键字,tag关键字是指明解析为什么标签
        <router-link to="/About" tag="button">关于</router-link>
        <router-link :to="'/User/'+userId" tag="button">用户</router-link>
        <router-view></router-view>  //渲染组件
        <h2>hahahaha</h2>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App',
      data() {
        return{
          userId:'pp'     //声明userId属性
        }
      }
    }
    </script>
    
    <style>
    .active {
      color: red;
    }
    </style>
    
    

    3.测试

    终端输入npm run dev(这里是脚手架二),如下图成功获取pp字段
    在这里插入图片描述

    展开全文
  • vue文件编写

    2020-07-30 20:57:26
    在这api.js中编写调用的接口的方法 1例如:1 import common from “@/common/common.js”; export function getAddressList(params) { return common.get({ url: common.apiHost + ‘api/mall/address’, data: ...
  • 如何编写一个vue页面

    2019-10-10 13:31:23
    .vue <template> <div>写html代码</div> </template> <script>写js代码和用于交互</script> <stylescoped>写css样式:style里加scoped关键字就能限制样式只对当前页面...
  • 使用vue-cli编写一个vue小插件 1.使用cli创建一个vue项目 vue init webpack ”项目名称“ 2.在build目录下创建一下插件打包配置文件 //webpack.dist.conf.js var path = require('path') var webpack = require('...
  • 编写一个Vue插件notification

    千次阅读 2018-06-22 11:51:56
    怎么为Vue编写插件 vue官网有介绍 https://cn.vuejs.org/v2/guide/plugins.html 本例 通过把它们添加到 Vue.prototype 上实现添加插件...首先使用vue-cli生成一个项目,命令是: npm install -g @vue/cli或者 ya...
  • 一、创建VUE项目1、新建一个vue项目进入工作目录,新建一个vue项目:vue init webpack 项目名vue init webpack vue-project-demoimage.png说明:Vue build ==> 打包方式,回车即可;Install vue-router ==> ...
  • 本篇文章主要介绍了详解使用webpack打包编写一个vue插件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • .vue文件编写

    千次阅读 2019-09-03 09:50:54
    什么是Vue.js? Vue.js是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层....vue文件分为三部分:template、script、style。 template部分...
  • 如何预览一个.vue文件进行预览呢? 每天写个页面,都要配置脚手架,能不能像以前开发前端页面一样,写一个index.html,然后编写js,css,就可以在浏览器上运行了呢?可是我又不想舍弃vue,那么能不能全局搭建一个...
  • 1、创建.d.ts文件 import Vue from 'vue' 确保在声明补充的类型之前导入'vue' (1)为实例和类添加额外约束 declare module 'vue/types/vue' { 在types/vue.d.ts里Vue有构造函数类型 interface Vue { 声明...
  • 使用HBuilderX编写一个Vue项目之js

    万次阅读 2019-04-28 10:59:06
    首先建好文件目录后 我的文件结构如下: 使用HBuilderX自带终端命令窗口 导入jQuery 1.npm init -y 初始化 2.npm i jquery -S 导入jquery 导入后直接引用js文件浏览器会报错:undefined token import ...
  • 原文链接 如不允许转载,可留言,我将在看到后... 这篇文章就是通过一个简单的例子,总结一下这个过程,加深记忆,也希望可以帮助后来的人。 一、插件是什么  我们在vue中,经常会通过全局方法Vue.use()来使用插件...
  • Vue编写一个Vue插件并发布到NPM

    千次阅读 2018-04-03 11:19:50
    初始化Vue插件项目# 安装vue cli # 初始化插件项目 vue init webpack-simple v-dplayer index.js:为插件的入口文件 v-dplayer.vue:为插件的vue组件 编写插件的Vue组件 v-dplayer.vue <div id="dplayer"></di
  • 使用webpack打包编写一个vue插件

    千次阅读 2017-11-01 11:08:37
    需求:创建一个toast插件 思路:利用vue组件创建模板,使用webpack打包生成插件再全局使用。 # 项目目录: |_ package.json |_ webpack.config.js |_ .babelrc |_ dist |_ src |_ index.html |_ lib |_ index....
  • 自己编写并发布一个Vue组件 1. 几种开源协议的介绍 https://blog.csdn.net/techbirds_bao/article/details/8785413 2.开始编写组件 新建plugin文件夹: 指定 组件、入口文件和package.json文件, ...
  • vue自己编写封装一个简单的组件

    千次阅读 2020-03-17 17:13:42
    闲来无聊,自己写一个简单的步进器组件。 新建目录/页面目录结构 把一个.vue页面分为三个部分 Tql.vue只写页面的html结构 stepper,js只写页面的用户交互/逻辑部分 stepper.less只写页面的表现样式部分 --stepper ---...
  • 当使用VSCode编写 .vue 文件时无代码片段提示时,装上 Vetur 和 Vue 2 Snippets两插件即可 转载于:https://www.cnblogs.com/czmblog0/p/10546780.html
  • vue文件引入一个js文件(公共函数)

    千次阅读 2019-01-15 16:56:56
    vue文件引入一个js文件欢迎使用Markdown编辑器 欢迎使用Markdown编辑器 写vue项目的时候,会遇到有公共的js函数需要提取出来 在好几个文件里引用,或者引入一个变量或者json。 我的做法是 新建一个js文件 // ...
  • 简单运行Vue文件

    2019-12-19 23:06:49
    .vue文件 分为三个部分 ...属性 来防止不同的vue文件的样式混淆的问题 下面我们表演如何用webstrom 来运行一个简单的hello.vue文件 <template> <div class="hello"> Hello {{who}} ...
  • vue基于nodejs,可以将nodejs理解为是一个运行js的平台, 而npm则类似于maven,又很多使用的js库,我们可以通过npm来引用下载兵使用这些分享的模块 webpack是一个开源的前端打包工具,也是基于nodejs的 vue工程搭建...
  • 简单一个项目demo 因为个人比较菜,踩了很多坑才得以解决 写出来供大家一起参考,欢迎大家指出 本次项目使用的是Vue和elementUI来进行制作的 想做出简单文件管理器的效果 比如路由切换,文件增删改以及文件夹...
  • 使用vue2.0+编写一个音乐播放器所使用到的技术栈1、Vuex插件:对vue,js编写的项目进行状态管理的模式,用于抽取组件间共享的状态;定义和隔离状态,使代码易维护和结构化2、使用vue.js中的内置组件&lt;...
  • 之前创建项目的时候,把eslint语法检查给装上了,在用vscode编写代码的时候,稍微打空格,编辑器就出现红色波浪线提示语法错误,这就真的有点恶心了,在网上也找了很多方法,都没有解决到根本问题,索性就自己去...
  • 习惯性的使用vue文件编写一个组件,如果将这个UI组件添加到每个页面组件中,这要修改很多地方,而且每个页面需要单独引入组件,因此就考虑到使用全局组件。 例子说明 创建CreateWorkerContainer.vue组件,代码...
  • 主要介绍了vue请求本地自己编写的json文件,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 1.目录结构(配置的js文件、要引入json的vue文件、自己编写的json文件) 2.接下来是build/webpack.dev.conf.js文件需要配置的内容 代码: constexpress=require('express') constapp=express() ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,839
精华内容 15,535
关键字:

编写一个简单的vue文件

vue 订阅