Vue学习笔记之vue,vue项目营造进阶

Adelaide大学qdu的onlinejudge是js的写的前端,框架是vue.js,在nodejs上配置运维,其实全体运维依旧建立在docker的器皿虚拟环境里,这里暂时不供给docker。安装环境是Ubuntu14-64bit

澳门葡京 1

应用 vue.js 创设大型单页应用,vue.js构建

置于条件:

熟稔使用 Javascript + HTML伍 + css3。
理解 ES2015 Module 模块(export、import、export-default)。
打听 nodejs 基础知识,npm 常用命令,以及 npm script 使用 (vue
项目中应用 npm 进行包管理)。
了然 webpack 打包工具 (常用配置选项以及 loader 概念)。(webpack
webpack.github.io/ 是贰个模块打包工具。它将一群众文化艺术件中的每一个文件都用作贰个模块,找寻它们的注重性关系,将它们打包为可配备的静态能源。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’ // 引进路由配置文件
​ 
Vue学习笔记之vue,vue项目营造进阶。​ 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
    }
   ]
})

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

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

// 今后,应用已经起步了!

vue.js 营造大型单页应用,vue.js构建后置条件: 熟谙使用 Javascript + HTML5 + css3。 明白 ES20一5 Module
模块(export、import、export-default)。 了然…

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

嵌入条件:

  1. 深谙使用 Javascript + HTML5 + 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:编写翻译项目标有的指令

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

连串加载进度:

澳门葡京 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 + HTML伍 + css3。 通晓 ES2015 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,借使能显得出版本号,就表明安装成功。

澳门葡京 4

查看node版本

二.首先fock前端到您的github,那样之后能够友善改并且自个儿推送,然后Git到地头机械。笔者的虚拟机械运输营的Ubuntu14-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
清理缓存,然后再重新安装。前面包车型地铁装置进度中,如有安装战败的动静,也须求先清理缓存

1如既往能够行使 cnpm -v 查看是不是安装成功

澳门葡京 5

查看cnpm版本

然后接纳 cnpm 安装 vue-cli 和 webpack

cnpm install -g vue-cli

流行的 vue 项目模板中,都饱含 webpack 插件,所以那里能够不安装 webpack

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

澳门葡京 6

vue版本查看

万1提醒“不能识别 ‘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
是自定义的项目名称,命令推行之后,会在当下目录生成三个以该名称命名的类型文件夹

澳门葡京 7

模板进度

配备实现后,可以见见目录下多出了一个连串文件夹,里面便是 vue-cli
创设的1个依据 webpack 的 vue.js 项目

下一场进入项目目录(cd Vue-Project),使用 cnpm 安装依赖

cnpm install

下一场运营项目

npm run dev

假如浏览器张开之后,未有加载出页面,有非常的大可能是本地的 8080
端口被攻陷,要求修改一下布署文件 config>index.js

澳门葡京 8

转移配置

建议将端口号改为不常用的端口。其它小编还将 build 的路径前缀修改为 ‘ ./
‘(原本为 ‘ / ‘),是因为包装之后,外部引进 js 和 css 文件时,要是路线以
‘ / ‘
初步,在本地是无能为力找到呼应文件的(服务器上没难题)。所以借使急需在地方张开包裹后的文本,就得修改文件路线。

三.因为qduoj二.0证实必要nodejs version
陆.1一,小编已初步一直下载的源码包本地编写翻译安装,可是装好了在背后的oj陈设时候总是出错,也大概是任何版本的npm未有删干净,所以最后小编用的nvm,那是nodejs的版本管理器,挺方便的。

(4)打包上线

本人的品种文件都供给安置 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组件来填充

澳门葡京 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

末尾还足以引进插件,当然首先得设置插件。

澳门葡京 10

main.js

nvm暗中同意使用的nodejs版本是如今1次安装的本子,倘使你有众多版本能够用上面的命令来选取

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

二个vue页面经常由三片段构成:模板(template)、js(script)、样式(style)

澳门葡京 11

App.vue

【template】
中间模板只好分包贰个父节点,相当于说顶层的div只可以有二个(例如下图,父节点为#app的div,其未有兄弟节点)
<router-view></router-view>是子路由视图,前边的路由页面都体今后那边
打多少个比喻吧,<router-view>类似于一个插槽,跳转某些路由时,该路由下的页面就插在那些插槽中渲染展现

【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文件夹下,有2个index.js,即为路由安排文件

澳门葡京 12

router

那边定义了路线为’/’的路由,该路由相应的页面是Hello组件,所以当大家在浏览器url访问http://localhost:8080/\#/时就渲染的Hello组件
类似的,大家得以设置四个路由,‘/index’,’/list’之类的,当然首先得引入该器件,再为该零件设置路由。
如上正是本文的全部内容,希望对大家的就学抱有支持,也可望大家多多帮忙脚本之家。

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

5、其余零件

例如现成组件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’

(2)局部注册 注意写在export
default内部,components:{FooterNav},该写法为es六写法阮一峰es6教程,将视图中的使用的零部件和相关数据对外开放,在中间vue-loader会进行相关操作的处理

(叁)使用组件 <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

澳门葡京 13

然后在浏览器输入localhost:8080就应运而生了前者。

澳门葡京 ,五.怎么样转移页面吗,我们先来探望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镜像上传计划的笔记。

参考文档:

11分谢谢以下前辈!

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

双重多谢!

相关文章

发表评论

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

*
*
Website