因项目工作需要,目前在研究前端的一些知识。主要想实现一个类似于webstorm,可以实现对本地文件进行增删改查等操作的IDE。下面通过几个专题,循序渐进,对某一些部分进行总结,希望能对你有帮助。(网上资料太多太杂,适合自己的还是需要自己去理解~~~)
- vue-cli脚手架的简单介绍、安装等
- element-ui框架简单介绍
- vue-cli element-ui融合
- 富文本编辑器在前端页面的使用—AceEditor
- vue-cli简单集成codemirror编辑器
- 基于electron-vue二次开发
0. 前端笔记
下面附上对于初学者友好的html、css、js教程链接:
- HTML(菜鸟教程):http://www.runoob.com/html/html-tutorial.html
- CSS(菜鸟教程):http://www.runoob.com/css/css-tutorial.html
- JS(菜鸟教程):http://www.runoob.com/js/js-tutorial.html
注释:
- html的注释代码格式: <!--你的代码块-->,可以单行注释,也可以注释多行;
- css的注释代码格式: /* 你的css */,多数情况下也是用于说明,
- js的注释格式: // 你的js代码; 可以用于说明你当前代码的用途啊、作用啊等等~;js还能注释多行代码,格式跟css注释一样:/* 你的js */;
1. vue-cli脚手架的简单介绍、安装等
安装:
- 前提是需要保证有node的环境
- npm install webpack -g (安装webpack打包工具,webpack -v)
- npm install -g vue-cli (安装vue-cli脚手架,vue -v)
- vue init webpack my-project (创建了my-project目录结构)
- cd my-project
- 安装项目依赖 npm install
- 启动项目 npm run dev
官方教程:
https://cn.vuejs.org/v2/guide/
2. element-ui框架简单介绍
安装element-ui
npm i element-ui --save
开始使用
参照element-ui官方文档:http://element.eleme.io/#/zh-CN/component/installation
3. vue-cli element-ui融合
使用:
1. 在入口main.js文件中引入element-ui模块(前提是需要先安装好)
1 ……
2 import ElementUI from 'element-ui';
3 import 'element-ui/lib/theme-chalk/index.css';
4
5 Vue.use(ElementUI);
6
2. 在xxx.vue文件中<template></template>部分,需要使用的地方引入element-ui组件;<script></script>;<style></style>:
1 <template>
2 <div class="body">
3 <div>
4 <el-button @click="showDirDialog" plain>打开</el-button>
5 </div>
6 <el-container>
7 <!--顶部栏-->
8 <el-header height="50px">header</el-header>
9 <el-container>
10 <!--左侧侧边栏-->
11 <el-aside width="300px">
12 <el-tree ref="dirTree" :data="dirTree" :props="defaultProps" :load="loadSubFile" lazy
13 @node-click="treeNodeClick"></el-tree>
14 </el-aside>
15 <!--主-->
16 <el-main>
17 <!--编辑器-->
18 <codemirror :value="code" :options="cmOptions"></codemirror>
19 </el-main>
20 </el-container>
21 </el-container>
22 </div>
23
4. 富文本编辑器在前端页面的使用—AceEditor
什么是富文本编辑器?
富文本编辑器,是一种可内嵌于浏览器,所见即所得的文本编辑器。富文本编辑器不同于文本编辑器,可到网上下载免费的富文本编辑器内嵌于自己的网站或程序里,方便用户编辑文章或信息。比较常用的是:kindeditor、aceEditor、UEditor、Codemirror等。
AceEditor介绍与使用:
- 简单介绍:
ACE 是一个开源的、独立的、基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScript应用程序中。ACE支持超过60种语言语法高亮,具有良好的代码提示功能和大量的主题,并能够处理代码多达400万行的大型文档。ACE开发团队称,ACE在性能和功能上可以媲美本地代码编辑器(如Sublime Text、TextMate和Vim等)。
- 使用:
下载后,直接在项目中引用,即可(div的高度必须设置,否则不会显示出来)。示例代码如下(main.html文件):
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test_demo</title>
6 <script src="../src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
7 <script src="../src-noconflict/ext-language_tools.js" type="text/javascript"></script>
8 </head>
9
10 <body>
11 <div style="height: 300px" id="editorDiv"></div>
12 <script>
13 var editor = ace.edit("editorDiv");
14 editor.$blockScrolling = Infinity;
15 //字体大小
16 editor.setFontSize(16);
17 //设置编辑器样式,对应theme-*.js文件
18 editor.session.setMode("ace/mode/c_cpp");
19 //设置代码语言,对应mode-*.js文件
20 editor.session.setMode("ace/mode/javascript");
21 //设置打印线是否显示
22 editor.setShowPrintMargin(false);
23 //设置是否只读
24 editor.setReadOnly(false);
25 //与ctrl+f功能一致,搜索
26 editor.execCommand('find');
27 //设置代码折叠
28 editor.getSession().setUseWrapMode(true);
29 //设置高亮
30 //editor.setHighlightActiveLine(false);
31
32 //以下部分是设置输入代码提示的,如果不需要可以不用引用ext-language_tools.js
33 ace.require("ace/ext/language_tools");
34 editor.setOptions({
35 enableBasicAutocompletion: true,
36 enableSnippets: true,
37 enableLiveAutocompletion: true
38 });
39 editor.setTheme("ace/theme/chrome");
40 </script>
41 </body>
42 </html>
5. vue-cli简单集成codemirror编辑器
使用:
1. 在入口main.js文件中引入codemirror模块(前提是需要先安装好)
1 ……
2 import VueCodemirror from 'vue-codemirror';
3 import 'codemirror/lib/codemirror.css';
4
5 Vue.use(VueCodemirror);
6
2. 在xxx.vue文件中<template></template>部分,需要使用的地方引入codemirror:
1 ……
2 <!--编辑器-->
3 <codemirror :value="code" :options="cmOptions"></codemirror>
4
3. 在xxx.vue文件中<script></script>部分,需要使用的地方引入js逻辑代码:
1 import {codemirror} from 'vue-codemirror';
2 import "codemirror/mode/python/python.js";
3 import 'codemirror/addon/fold/foldcode.js';
4 import 'codemirror/addon/fold/foldgutter.js';
5 import 'codemirror/addon/fold/brace-fold.js';
6 import 'codemirror/addon/fold/xml-fold.js';
7 import 'codemirror/addon/fold/indent-fold.js';
8 import 'codemirror/addon/fold/markdown-fold.js';
9 import 'codemirror/addon/fold/comment-fold.js';
10
11 export default {
12 components: {
13 codemirror
14 },
15 data() {
16 return {
17 code: '',
18 cmOptions: {
19 tabSize: 4,
20 mode: 'text/javascript',
21 lineNumbers: true
22 }
23 }
24 },
25 mounted() {
26 },
27 methods: {
28 ……,
29 displayFileData(content) {
30 this.code = content;
31 }
32 }
33
4. 在xxx.vue文件中<style></style>部分,需要使用的地方引入样式代码(略)
6. 基于electron-vue二次开发
使用脚手架样板构建项目
- vue init simulatedgreg/electron-vue my-project
- cd my-project
- npm install
- npm run dev
(如果遇到run dev或者run build的时候出错,可能是因为国内的网络下载“electron-v1.8.3-win32-x64.zip”出错。)
使用 —>官方文档:
https://electron.org.cn/vue/index.html
https://simulatedgreg.gitbooks.io/electron-vue/content/cn/