澳门威利斯人_威利斯人娱乐「手机版」

来自 办公软件 2019-05-04 09:07 的文章
当前位置: 澳门威利斯人 > 办公软件 > 正文

构建大型单页应用,二次开发

克利夫兰洲大学学qdu的onlinejudge是js的写的前端,框架是vue.js,在nodejs上布置运转,其实全体运转照旧创建在docker的器皿虚拟遇到里,这里暂且无需docker。安装情况是Ubuntu1四-64bit

图片 1

运用 vue.js 创设大型单页应用,vue.js营造

放到条件:

熟稔使用 Javascript HTML5 css三。
理解 ES2015 Module 模块(export、import、export-default)。
叩问 nodejs 基础知识,npm 常用命令,以及 npm script 使用 (vue 项目中运用 npm 进行包管理)。
打探 webpack 打包工具 (常用配置选项以及 loader 概念)。(webpack webpack.github.io/ 是1个模块打包工具。它将一群文件中的每一个文件都作为三个模块,寻觅它们的依赖关系,将它们打包为可配置的静态财富。webpack 的行使也要求 npm 的安装方式)。

发端设置:

接纳 vue-cli 营造大型单页应用:vue.js 的脚手架工具。

进行下述代码,即可变成项目基础创设(已配备好 webpack、重视包的装置、基本目录的成形)。

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev

注重目录:

├── build // webpack的基本配备、开采条件安排、生产境况安排
    ├── config // 路线、端口以及反向代理配置
    ├── dist // webpack打包后的静态财富
    ├── node_modules // npm安装的依赖包
    ├── src // 前端主文件
    │   ├── assets // 静态能源
    │   │   ├── font
    │   │   ├── img
    │   │   └── scss
    │   ├── components // 单个组件
    │   │   ├── xxx.vue // 单文件组件
    │   ├── router // 路由安顿
    │   ├── store // 全局变量
    │   ├── App.vue // App组件
    │   ├── main.js 主入口文件
    ├── static // 静态文件
    ├── .babelrc  // babel的配备项
    ├── .editorconfig  // 编辑器的安排项
    ├── .gitignore  // 会忽略语法检查的目录
    ├── index.html // 入口页面
    ├── package.json // 项目标描述和正视
package.json文件表明:项目标叙说和正视性

  1. scripts:编写翻译项目标片段指令

例:实行 npm run dev ,即进行 scripts 中对应的 node build/dev-server.js。

  1. dependencies:项目揭露时的信赖

例:实行 npm install wx --save ,即安装重视模块 wx。

  1. devDependencies:项目支出时的信赖

例:实行 npm install sass --save-dev ,即安装注重模块 sass。

附:npm 相关认证:

npm 为 Node.js 版本管理和依赖性包管理工科具,通过 node 境况来安装前端创设项目所需依赖包。

npm 安装下载速度过慢,使用天猫镜像 cnpm install 快捷安装。设置方法:

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

种类加载进度:

图片 2

  1. index.html 页面

现阶段构建项目为 SPA (单页面应用),index.html 页面即为入口页面,进行meta 等相关页面配置。

​该页面包车型客车 <div id="app"></div> 挂载了主组件。

  1. main.js:主入口文件

​注: 在 webpack.base.config 中设置 -> entry: { app: './src/main.js'}

​该公文开头化 vue 实例并引入相应模块 (引进前需确认在 package.json 中张开布置并安装),附 main.js 引进及表达:

​ import Vue from 'vue'   // 引入vue
​ 
​ import App from './App'   // 引进主组件App.vue
​ 
​ import router from './router' // 引进路由配置文件
​ 
​ import axios from 'axios' // 引进网络请求工具axios

  1. App.vue:主组件

​在 index.html 入口页面中挂载了主组件,并在 main.js 主入口文件中引入了主组件。

​创建了其它零件 (例: /src/components/xxx.vue )后,通过路由配置就能够渲染在目前主组件中。

  1. 路由配置 vue-router

​路由安插:将零件 (components) 映射到路由 (routes),然后告诉 vue-router 在什么地方渲染它们

npm install vue-router
import Vue from 'vue'

import Router from 'vue-router'

Vue.use(Router)

// 一.定义(路由)组件:import (当前使用中为单文件组件)。
import Home from '../components/Home.vue'

// 二. 定义路由并创办 router 实例,然后传 `routes` 配置
// 每一种路由应该映射二个零部件。
var router = {}

export default router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
   ]
})

// 3. 在main.js主入口文件中创建和挂载根实例。
// 记得要透过 router 配置参数注入路由,
// 从而让全体应用都有路由功用

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

// 今后,应用已经运转了!

vue.js 营造大型单页应用,vue.js创设前置条件: 熟谙使用 Javascript HTML5 css三。 精通 ES20一伍 Module 模块(export、import、export-default)。 驾驭...

一.设置一大堆软件

Vue

sudo apt-get update
sudo apt-get install git vim wget
sudo apt-get install redis-server
sudo apt-get install postgresql
#openssl是后边部署OJ必须
sudo apt-get install openssl libssl-dev
#这是一个完整的开发工具包,提供了gcc,libc等乱七八糟的工具和软件
sudo apt-get install build-essential 
(一)安装node.js

首先须要设置node情况,能够平素到汉语官方网址http://nodejs.cn/下载安装包。

只是这么设置的 node 是一定版本的,假使需求多版本的 node,能够选用 nvm 安装http://blog.csdn.net/s8460049/article/details/52396399

安装完毕后,能够命令行工具中输入 node -v 和 npm -v,固然能显得出版本号,就印证安装成功。

图片 3

查看node版本

二.首先fock前端到您的github,那样之后能够团结改并且本身推送,然后Git到地面机械。作者的虚拟机械运输转的Ubuntu1肆-6四bit。后面包车型客车一声令下假设供给权限就把sudo加上,root用户就主动忽略吧。

(二)安装vue-cli

安装好了 node,大家能够一向全局安装 vue-cli:

npm install -g vue-cli

而是那种装置形式一点也不快,推荐使用国内镜像来设置,所以我们先安装 cnpm:

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

借使设置战败,能够行使 npm cache clean 清理缓存,然后再重新安装。前面包车型客车设置进程中,如有安装退步的状态,也需求先清理缓存

同等能够利用 cnpm -v 查看是不是安装成功

图片 4

查看cnpm版本

然后选拔 cnpm 安装 vue-cli 和 webpack

cnpm install -g vue-cli

新颖的 vue 项目模板中,都带有 webpack 插件,所以这里能够不安装 webpack

设置到位后,能够选用 vue -V (注意 V 大写)查看是或不是安装成功。

图片 5

vue版本查看

如果提醒“无法甄别 'vue' ” ,有异常的大大概是 npm 版本过低,能够利用 npm install -g npm 来更新版本

git clone your_url(fork到你自己的github上的url)
(3)生成项目

第二必要在指令行中进入到项目目录,然后输入:

vue init webpack Vue-Project

当中 webpack 是模板名称,可以到 vue.js 的 GitHub 上查看越多的沙盘https://github.com/vuejs-templates

Vue-Project 是自定义的项目名称,命令推行之后,会在现阶段目录生成3个以该名称命名的类型文件夹

图片 6

模板进度

布置达成后,能够看到目录下多出了三个品种文件夹,里面正是 vue-cli 成立的二个基于 webpack 的 vue.js 项目

接下来进入项目目录(cd Vue-Project),使用 cnpm 安装注重

cnpm install

下一场运营项目

npm run dev

假诺浏览器展开未来,未有加载出页面,有异常的大可能率是本地的 8080 端口被私吞,必要修改一下布署文件 config>index.js

图片 7

转移配置

建议将端口号改为不常用的端口。其它作者还将 build 的门径前缀修改为 ' ./ '(原本为 ' / '),是因为包装之后,外部引进 js 和 css 文件时,尽管路线以 ' / ' 起初,在地头是无能为力找到相应文件的(服务器上没难点)。所以一旦必要在本土张开包装后的公文,就得修改文件路线。

三.因为qduoj2.0评释须求nodejs version 陆.1壹,笔者已初叶一向下载的源码包本地编译安装,可是装好了在后头的oj布署时候总是出错,也可能是其余版本的npm未有删干净,所以末了作者用的nvm,那是nodejs的版本管理器,挺方便的。

(四)打包上线

团结的项目文件都亟待安置 src 文件夹下

类型开采到位现在,能够输入 npm run build 来拓展打包工作

npm run build

打包达成后,会转换 dist 文件夹,若是已经修改了文本路线,可以直接展开当三步跳件查看

花色上线时,只供给将 dist 文件夹放到服务器就行了。

wget -O- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
(五)项目解析

等一声令下运转完安装好了,需求关闭bash,然后重启机器,nvm才会生效。

1、 index.html——[主页]

index.html如别的html一样,但貌似只定义二个空的根节点,在main.js里面定义的实例将挂载在根节点下,内容都因而vue组件来填充

图片 8

index.app

#这里不要急着运行!最后的这个.0挺有意思,因为要符合nvm的语义,不写的话就默认安装6.11.x中最新的那个
nvm install 6.11.0  
#如果上边的命令安装太慢就用这个taoao的镜像安装!
NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node nvm install 6.11.0 
2、main.js——[入口文件]

main.js首如果引进vue框架,根组件及路由设置,并且定义vue实例,下图中的

一>router就是安装路由器
2>template:"<App/>"就是设置#app的沙盘为<App></App>
三>components:{App}正是引进的根组件App.vue

最后还足以引入插件,当然首先得设置插件。

图片 9

main.js

nvm暗中同意使用的nodejs版本是近年来贰次安装的本子,假若您有许多版本能够用上面的通令来选取

3、App.vue——[根组件]

2个vue页面平常由3局地构成:模板(template)、js(script)、样式(style)

图片 10

App.vue

【template】
里头模板只好分包贰个父节点,也便是说顶层的div只可以有二个(比如下图,父节点为#app的div,其尚无兄弟节点)
<router-view></router-view>是子路由视图,前边的路由页面都映以往此处
打八个举个例子吧,<router-view>类似于2个插槽,跳转有个别路由时,该路由下的页面就插在这些插槽中渲染展现

【script】
vue常常用es六来写,用export default导出,其下部能够分包数据data,生命周期(mounted等),方法(methods)等,具体语法请看vue.js文书档案,在前边小编也会因而例子来注明。

【style】
体制经过style标签<style></style>包裹,暗中认可是熏陶全局的,如需定义功用域只在该器件下起效能,需在标签上加scoped,<style scoped></style>
如要引进外部css文件,首先需给品种安装css-loader信赖包,展开cmd,进入项目目录,输入npm install css-loader,回车。安装到位后,就能够在style标签下import所需的css文件,比方:

<style>

  import './assets/css/public.css'

</style>

诸如此类,大家就能够把style下的体制封装起来,写到css文件夹,再引入到页面使用,整个vue页面也看起来更简明。

nvm use 6.11.0
node --version
4、 router——[路由配置]

router文件夹下,有3个index.js,即为路由计划文件

图片 11

router

此处定义了路子为'/'的路由,该路由相应的页面是Hello组件,所以当我们在浏览器url访问http://localhost:8080/#/时就渲染的Hello组件
就如的,我们能够安装四个路由,‘/index','/list'之类的,当然首先得引进该零件,再为该器件设置路由。
如上正是本文的全体内容,希望对我们的上学抱有辅助,也愿意大家多多帮助脚本之家。

四.都装好了,未来可以安插前端了,cd到刚刚的git好的文书夹根目录,

伍、别的零件

譬如说现成组件footer.vue,原稿地址

<template>
    <div class="footer fixed">
        <ul>
            <li><router-link to='/'>首页</router-link></li>
            <li><router-link to='/manage'>人员管理</router-link></li>
        </ul>
    </div>
</template>

<style scoped>
    li a{display: inline-block; width: 100%; height:100%;}
    .footer{width:100%; height:50px; bottom:0;}
    ul{display: flex; height:100%; line-height:50px;}
    ul li{flex: 1; background-color:#f1f1f1;}
    .isIndex li:first-child{background-color:#d3d3d3;}
    .isIndex li:first-child a{color:#41b883;}
    .isManage li:last-child{background-color:#d3d3d3;}
    .isManage li:last-child a{color:#41b883;}
</style>

比方在其余页面中有应用到该器件能够如下:

<template>
    <div>
        欢迎来到人员管理系统
        <footer-nav v-bind:class="{'isIndex':isNowPage}"></footer-nav>
    </div>
</template>

<script>
    import FooterNav from '../../components/footer.vue'
    export default{
        components: {
            FooterNav
        },
        data(){
            return{
                isNowPage: true
            }
        }
    }
</script>

(壹)引进组件 import FooterNav from '../../components/footer.vue'

(贰)局地注册 注意写在export default内部,components:{FooterNav},该写法为es陆写法阮一峰es6教程,将视图中的使用的零部件和血脉相通数据对外开放,在里边vue-loader会实行连锁操作的拍卖

(3)使用组件 <footer-nav></footer-nav> 注意命名,驼峰法定义的零件FooterNav需在应用时用短横线连接<footer-nav>

留神:相对路线中./为眼下目录../为上级目录

npm install
#如果这一步过于慢就用taobao的镜像
npm config set registry https://registry.npm.taobao.org 
npm install

NODE_ENV=development npm run build:dll

#这里的Your-backend不需要怀疑不需要改!直接这么写!!!
export TARGET=http://Your-backend

npm run dev

图片 12

本文由澳门威利斯人发布于办公软件,转载请注明出处:构建大型单页应用,二次开发

关键词: 澳门威利斯人 我的Html5