营造大型单页应用,Vue学习笔记之vue

By admin in 4858美高梅 on 2019年4月17日

瓦伦西亚高校qdu的onlinejudge是js的写的前端,框架是vue.js,在nodejs上配备运营,其实全部运营仍然建立在docker的器皿虚拟环境里,那里临时不须求docker。安装环境是Ubuntu1四-64bit

4858美高梅 1

选择 vue.js 营造大型单页应用,vue.js营造

内置条件:

熟悉使用 Javascript + HTML五 + 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 // 前端主文件
营造大型单页应用,Vue学习笔记之vue。    │   ├── 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 安装下载速度过慢,使用Taobao镜像 cnpm install 急迅安装。设置格局:

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

品类加载过程:

4858美高梅 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’

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

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

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

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

// 现在,应用已经运行了!

vue.js 创设大型单页应用,vue.js营造前置条件: 熟识使用 Javascript + HTML伍 + css叁。 通晓 ES20一伍 Module
模块(export、import、export-default)。 了然…

Vue完整项目构建(进阶篇),vue项目营造进阶

内置条件:

  1. 深谙使用 Javascript + HTML伍 + css三。
  2. 理解 ES2015 Module 模块(export、import、export-default)。
  3. 问询 nodejs 基础知识,npm 常用命令,以及 npm script 使用 (vue
    项目中使用 npm 实行包管理)。
  4. 问询 webpack 打包工具 (常用配置选项以及 loader 概念)。(webpack
    webpack.github.io/ 是叁个模块打包工具。它将一批文件中的每一个文件都用作3个模块,找寻它们的依靠关系,将它们打包为可铺排的静态能源。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:编写翻译项指标1些限令

例:执行 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

品类加载进程:

4858美高梅 3 

  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)
// 1.定义(路由)组件:import (当前应用中为单文件组件)。
import Home from '../components/Home.vue'
// 2. 定义路由并创建 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完整项目营造,希望对大家全体帮衬,若是大家有此外疑问请给本人留言,笔者会及时回复大家的。在此也非常谢谢我们对帮客之家网址的支撑!

前置条件: 熟识使用 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,如果能显得出版本号,就认证安装成功。

4858美高梅 4

查看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 查看是还是不是安装成功

4858美高梅 5

查看cnpm版本

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

cnpm install -g vue-cli

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

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

4858美高梅 6

vue版本查看

假定提醒“相当的小概识别 ‘vue’ ” ,有极大可能率是 npm 版本过低,能够接纳 npm install
-g npm 来更新版本

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

首先供给在指令行中进入到项目目录,然后输入:

vue init webpack Vue-Project

中间 webpack 是模板名称,能够到 vue.js 的 GitHub
上查看越多的模版https://github.com/vuejs-templates

Vue-Project
是自定义的项目名称,命令实行之后,会在此时此刻目录生成三个以该名称命名的花色文件夹

4858美高梅 7

模板进度

铺排完毕后,能够见见目录下多出了贰个项目文件夹,里面纵使 vue-cli
成立的2个依照 webpack 的 vue.js 项目

然后进入项目目录(cd Vue-Project),使用 cnpm 安装重视

cnpm install

然后运维项目

npm run dev

如果浏览器展开之后,没有加载出页面,有非常大概率是地面包车型地铁 8080
端口被侵占,必要修改一下安排文件 config>index.js

4858美高梅 8

改换配置

建议将端口号改为不常用的端口。其余笔者还将 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同样,但貌似只定义3个空的根节点,在main.js里面定义的实例将挂载在根节点下,内容都通过vue组件来填充

4858美高梅 9

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就是安装路由器
贰>template:”<App/>”就是安装#app的模版为<App></App>
3>components:{App}就是引进的根组件App.vue

最终仍是能够引进插件,当然首先得设置插件。

4858美高梅 10

main.js

nvm默许使用的nodejs版本是多年来一次安装的本子,倘使你有大多版本能够用上面的指令来选取

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

三个vue页面日常由3有个别组成:模板(template)、js(script)、样式(style)

4858美高梅 11

App.vue

【template】
4858美高梅 ,里头模板只可以分包二个父节点,也正是说顶层的div只好有二个(例如下图,父节点为#app的div,其尚未兄弟节点)
<router-view></router-view>是子路由视图,后边的路由页面都显得在此间
打一个比方吧,<router-view>类似于3个插槽,跳转某些路由时,该路由下的页面就插在那一个插槽中渲染彰显

【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文件夹下,有八个index.js,即为路由布署文件

4858美高梅 12

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

4858美高梅 13

接下来在浏览器输入localhost:8080就应运而生了前者。

5.哪些更改页面吗,大家先来看望vue.js框架的网址目录结构:

| build |
项目营造(webpack)相关代码

|
| config | 配置目录,包蕴端口号等。我们初学能够利用默许的。 |
| node_modules | npm 加载的类型注重模块 |
| src |

此处是大家要支付的目录,基本上要做的事情都在那个目录里。里面含有了多少个目录及文件:

  • assets: 放置一些图片,如logo等。
  • components: 目录里面放了四个零部件文件,能够不用。
  • App.vue: 项目进口文件,大家也能够直接将零件写那里,而不采用components 目录。
  • main.js: 项指标大旨文件。

|
| static | 静态能源目录,如图片、字体等。 |
| index.html | 首页输入文件,你能够拉长一些 meta 音信或总计代码啥的。
|
| package.json | 项目布局文件。 |
| README.md |

类型的求证文档,markdown 格式。

|

之所以自定义页面基本正是在src/pages/oj/那里进行,当然src/里边的别的目录,比如styles/common.less就是css文件,还有static/css/loader.css那么些是加载页面包车型大巴css。

陆.就先那样,之后作者在补上打包成docker镜像上传布置的笔记。

参考文书档案:

非凡谢谢以下前辈!

qduoj-二回支付记录:https://www.finen.top/qduoj-development-record/

vue.js框架讲明:http://www.runoob.com/vue2/vue-directory-structure.html

Ubuntu下安装使用nvm:https://www.linuxidc.com/Linux/2017-01/139024.htm

执行sudo报错command not
found:https://blog.csdn.net/n66040927/article/details/78870627

化解nvm安装不当:https://cnodejs.org/topic/55ab67fe8834fbb55261c4e0

npm使用taobao源:ttps://blog.csdn.net/aerchi/article/details/54582778

前端组件无法渲染:https://github.com/QingdaoU/OnlineJudgeFE/issues/21

网页动态背景随鼠标转变的线条:https://www.cnblogs.com/qq597585136/p/7019755.html

再次谢谢!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有