日志——Vue.js开发在线简历生成器

第一次用vue，怕自己忘了...

准备工作

在github上新建一个仓库vue-resumer-1；
clone到本地；
在本地打开终端，cd到当前目录；
输入npm config set registry https://registry.npm.taobao.org/，设定npm下载途径；
输入npm init -y创建一个package.json（可自行修改）；
输入npm install -g vue-cli下载安装vue-cli命令行工具；
输入vue init <template-name> <project-name>，这里就输入vue init webpack .即可；
一路选择Y；
提示你选择Runtime + Compiler或者Runtime-only，前者适合浏览器环境（Compiler就是把HTML变成JS再把JS反馈到页面中），后者适合nodejs环境，这里选择前者；
提示Install vue-router?，选择n，因为手动安装更容易理解；
提示Use ESLint to lint your code?，选择n，因为ESLint有许多奇奇怪怪的规则，第二次使用时就可以Use了；
提示Setup unit tests with Karma + Mocha?，选择n，很多公司是不写单元测试的，所以也不选；
提示Setup e2e tests with Nightwatch?，选择n。
提示vue-cli Generated "vue-resumer-1".，告诉你已经生成；
输入npm install;
push到github上，添加描述git commit -am "vue init webpack . && npm install"；

初识Vue

输入npm run dev，创建了本地服务器，可以访问页面；
打开VScode，进入本地仓库vue-resumer-1，查看目录结构；
找到并打开index.html，发现HTML结构怪异：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>vue-resumer-1</title></head><body><div id="app"></div><!-- built files will be auto injected --></body>
</html>
复制代码

检查http://localhost:8080 页面，发现浏览器里实时文档结构是这样的：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>vue-resumer-1</title></head><body><div id="app"></div><!-- built files will be auto injected --><script type="text/javascript" src="/app.js"></script></body>
</html>
复制代码

对比发现，vue自动在HTML的<body/>前注入（inject）了一个JS脚本，其src="/app.js"；
进入./src/，发现只有assets、components、App.vue和main.js四个文件（夹）；
打开main.js：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',//容器components: { App },//ES6写法template: '<App/>'//HTML文档
})
复制代码

基本认识：index.html是HTML的入口文件，main.js是JS的入口文件，后者会自动注入到前者。
打开App.vue（这是已经修改过的文件）：

<template><div id="app"><Topbar class="topbar"/><main><Editor class="editor"/><Preview class="preview"/>   </main></div>
</template><script>
import Topbar from './components/Topbar'//不写后缀也无所谓，因为它会自行查找
import Editor from './components/Editor'
import Preview from './components/Preview'export default {components: {Topbar,Editor,Preview}
}
</script><style lang="scss">
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;height: 100vh;display: flex;flex-direction: column;
}
.topbar {background-color: red;
}
main {background-color: blue;display: flex;flex: 1;> .editor {width: 20em;}> .preview {flex: 1;}
}
</style>
复制代码

可以发现.vue后缀的文件结构，就是<template><template/>、<script><script/>、<style><style/>三个根标签组成的。
<template><template/>里面是关于文档的总体结构，这里的语法实际上是XML；
<script><script/>里面是配置要引入的组件；
<style><style/>里面是设置样式；
.vue结尾的文件，叫做“单文件组件”，除了App.vue之外，都放在了components文件夹里面；
可以自己写一个单文件组件，如Topbar.vue，放在components文件夹里，然后通过App.vue里的

<script>import Topbar from './components/Topbar'export default{components: {"Topbar": Topbar}}
<script/>
复制代码

来引用，把<Topbar/>放在<template><template/>中你想要放置的位置，再通过<style><style/>来统筹App.vue的总体样式。

以上是第一种引用标签的方式，即import它，还有一种方式：
全局注册标签（少用）
我们可以在main.js文件new Vue之前，注册一个标签：

import Vue from 'vue'
import App from './App'Vue.config.productionTip = falseVue.component('Jack', {template: '<p>I am {{name}}</p>',data(){   //data必须是一个functionreturn{name:'Jack Ma'}}
})new Vue({el: '#app',components: { "App": App },//ES6语法，如果key和value是相同的，可以写成components: { App }template: '<App/>'
})
复制代码

这样，就可以直接在App.vue的<template><template/>里面添加<Jack/>了，就相当于是添加了子标签<p>I am {{name}}</p>；
另外，还可以把components里的单文件组件在main.js里给注册成全局标签：

import Hello from './components/HelloWorld'
Vue.component('Hello',Hello)
复制代码

这样，HelloWorld.vue就可以不用在App.vue里import就直接放入<template><template/>里用了；

总结一下：

index.html是HTML的入口文件，main.js是JS的入口文件，后者会自动注入到前者；
main.js主要负责import全局变量和new Vue；
App.vue负责import各component，整合APP的整体template和设置style；
各component放入components文件里，每一个都是一个单文件组件，可以被App.vue和main.jsimport。

实现基本布局

总体思路：
布局无非就是topbar、editor、preview三个部分，可以做成三个单文件组件，放进components文件夹里，再在App.vue里import并设置style；
终端输入npm i -S normalize.css引入normalize.css，在main.js里import normalize.css；
在assets文件夹里新建一个reset.scss文件，重置CSS，在main.js里import './assets/reset.scss'，App.vue的style部分可以设置成<style lang="scss"><style/>；
但要确保有sass-loader和node-sass，如果没有，会报错，可以在终端输入npm i -g sass-loader和npm i -D node-sass；

日志——Vue.js开发在线简历生成器相关推荐

打造在线简历生成器，让面试官眼前一亮……
‍ ‍ 茶已备好,只待君来!感谢关注前端点线面 (>‿<),本号干货满满:14个门类(100+篇原创)内容--又干又硬.<前端百题斩>pdf--助力薪资double.20+篇 ...
用Vue.js开发微信小程序：开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
java计算机毕业设计vue.js开发红酒网站源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue.js开发红酒网站源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue.js开发红酒网站源码+mysql数据库+系统+lw文档+部署本源码技术栈: ...
使用Vue.js开发微信小程序：开源框架mpvue解析
前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发 ...
java计算机毕业设计vue.js开发红酒网站MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计vue.js开发红酒网站MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计vue.js开发红酒网站MyBatis+系统+LW文档+源码+调试部署本源码技术栈 ...
JAVA毕业设计vue.js开发红酒网站计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计vue.js开发红酒网站计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计vue.js开发红酒网站计算机源码+lw文档+系统+调试部署+数据库本源码技术栈: 项目架构:B ...
基于 Laravel、Vue.js开发的全新社交系统----ThinkSNS+
2019独角兽企业重金招聘Python工程师标准>>> ThinkSNS(简称TS)始于2008年,一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方 ...
【vue.js开发】如何在vue里面优雅的解决跨域，路由冲突问题
[vue.js开发]如何在vue里面优雅的解决跨域,路由冲突问题当我们在路由里面配置成以下代理可以解决跨域问题 proxyTable: {'/goods/*': {target: 'http://l ...
mpvue 微信小程序_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全责编 | 阿秃转自 | 美团技术团队企业博客前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...

日志——Vue.js开发在线简历生成器

准备工作

初识Vue

实现基本布局

日志——Vue.js开发在线简历生成器相关推荐

最新文章

热门文章