Introduction 1. ElementUI
We learn VUE, know that it's the core idea of style components and data driven, but every component you need to write your own templates, styles, add events, and other data are very troublesome,so hungry yet introduced based on the component library VUE2.0 its name is called element-ui, provides a rich PC-side components
Getting ElementUI
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>elementui入门</title> 6 <!-- 1. 导入css --> 7 <link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet"> 8 <!-- 2. 引入vue和vue-router--> 9 <script src= "https://cdn.bootcss.com/vue/2.6.10/vue.js" > </ Script > 10 <-! unused routing function may import vue -> . 11 < Script the src = "HTTPS: //cdn.bootcss.com/vue-router/3.0.6/vue-router.js " > </ Script > 12 is <-! 3. ElementUI assembly incorporated -> 13 is < Script the src =" HTTPS: // cdn.bootcss.com/element-ui/2.8.2/index.js " > </ Script > 14 < style > 15 .el-Row { 16 margin-bottom : 20px; 17 18 &:last-child { 19 margin-bottom: 0; 20 } 21 } 22 23 .el-col { 24 border-radius: 4px; 25 } 26 27 .bg-purple-dark { 28 background: #99a9bf; 29 } 30 31 .bg-purple { 32 background: #d3dce6; 33 } 34 35 .bg-purple-light { 36 background: #e5e9f2; 37 } 38 39 .grid-content { 40 border-radius: 4px; 41 min-height: 36px; 42 } 43 44 .row-bg { 45 padding: 10px 0; 46 background-color: #f9fafc; 47 } 48 </style> 49 </head> 50 <body> 51 <div id="app"> 52 <ul> 53 <li> 54 <h1>{{ts}}</h1> 55 <p>传统html+vue+elementUI开发</p> 56 <el-row> 57 <el-col :span="24"> 58 <div class="grid-content bg-purple-dark"> 59 <el-button type="primary" v-on:click="doClick">主要按钮</el-button> 60 </div> 61 </el-col> 62 </el-row> 63 <el-row> 64 <el-col :span="18"> 65 <div class="grid-content bg-purple" style="height: 400px;">博客信息</div> 66 </el-col> 67 <el-col :span="6"> 68 <div class="grid-content bg-purple-light" style="height: 400px;">分类管理</div> 69 </el-col> 70 </el-row> 71 <el-row> 72 <el-col :span="24"> 73 <div class="grid-content bg-purple-dark">版权信息</div> 74 </el-col> 75 </el-row> 76 77 </li> 78 </ul> 79 </div> 80 </body> 81 <script> 82 var vm = new Vue({ 83 el: "#app", 84 data: function() { 85 return { 86 TS: new new a Date () the getTime (). 87 } 88 }, 89 Methods: { 90 doClick: function () { 91 is the console.log ( ' doClick ' ); 92 the this . Alert $ ( ' This is a content ' , ' title name ' , { 93 confirmButtonText: ' OK ' , 94 callback: action => { 95 this.$message({ 96 type: 'info', 97 message: `action: ${ action }` 98 }); 99 } 100 }); 101 } 102 } 103 }); 104 </script> 105 </html>
After the operation of the interface:
2, NodeJS environment to build
What is 1. Node.js
1.1 Node.js is based Chrome V8 engine [JavaScript runtime environment]. Node.js uses an event-driven, non-blocking I / O model.1.2 Node.js is a platform to make JavaScript running in the development server, it allows JavaScript to be with PHP, Python, Perl, Ruby and other server-side scripting language on an equal footing
the J2EE -> the Java runtime environment, development of language is java
Note 2: Node.js v10.15.3 Document address: http: //nodejs.cn/ api /
2. What is the npm
npm fact, Node.js package management tool (package manager).If we want to use a package written by someone else, always searching by name at the official website, download the code, extract, re-use, very cumbersome.
So a centralized management tool emerged: put npm official website after everyone had put their own developed modules package, if you want to use,
directly through npm installation can be directly used, there is no managed code which should be where to download.
npm according dependencies, all dependent packages are downloaded and manage. Otherwise, manually manage on our own, certainly cumbersome and error-prone.
3. Node.js environment to build
Because Node.js is a platform to run JavaScript code in the back end, so, you must first install Node environment in this machine.
3.1 Download
Download: https: //nodejs.org/zh-cn/download/select the appropriate version download, used in this chapter are: node-v10.15.3-win-x64.zip
3.2 unzip
Extract the file to a specified location (for example: D: \ initPath), and to establish and node_cache node_global two directories under the directory after extracting
Note 1: New directory Description
node_global: npm global installation location
node_cache: npm cache path
3.3 Configuration Environment Variables
Add NODE_HOME , is: D: \ initPath \ node- v10.15.3-win-x64 ( here, the installation package is unpacked Road King)modify the PATH and finally add: ;% NODE_HOME%; NODE_HOME%% \ node_global ;
echo% node_home%
echo% path%
the Node -v
npm -v
3.4 Configuration npm global cache module and the default installation location path
Open cmd, separate run the following command:
NPM config SET Cache "D: \ initPath \ Node-v10.15.3-win-x64-\ node_cache" Note: the contents of the installation to the local path
npm config set prefix "D: \ initPath \ node-v10.15.3-win-x64 \ node_global " Note: the contents of change to local installation path Note 1: the node_global (npm global installation location) and node_cache (npm cache path) steps to create a relationship with them npm Note 2 : If you execute the command stuck, you can delete the C: \ users \ username \ re-run after .npmrc. (User name: computer for the current user name) Note 3: "D: \ initPath \ node-v10.15.3-win-x64 \ node_global", double quotation marks can not be less
3.5 npm modified image download speed (or may be used directly cnpm --registry, recommended setting --registry)
3.5.1 --registry
## 设置淘宝源
npm config set registry https://registry.npm.taobao.org/
## 查看源，可以看到设置过的所有的源
npm config get registry
注1：其实此步骤的内容就是将以下代码添加到C:\Users\用户名\.npmrc文件中
registry=https://registry.npm.taobao.org
3.5 验证安装结果
3.5.1 版本验证(同步骤3.3，注2)
node -v
npm -v
3.5.2 查看淘宝镜像设置情况
npm get registry
3.6.3 查看npm全局路径设置情况
## 此步骤随便全局安装一个模块就可以测评
npm install webpack -g
## 以上命令执行完毕后，会生成如下文件
%node_home%\node_global\node_modules\webpack
注意：下载过程中出现warn不用管，出现Error，删掉下载的破碎文件重新下载
4. 如何运行下载的Node.js项目
将下载的项目解压到指定目录，本例是解压到：D:\eeeee\vueproject，后面都以此为例## 1. 打开命令窗口
cmd
## 2. 切换到d盘
d:
cd D:\eeeee\vueproject
4. 进行依赖安装
命令执行完后，你会发现，项目的根目录下多了一个node_modules文件夹，## 那里面就是从npm远程库里下载的模块，然后“安装”到你的项目中，
## 此步骤，可理解成修改maven的pom文件添加依赖，然后maven再从中央仓库下载依赖
## 那pom文件在哪里呢？其实就是项目中的package.json
npm install
5. 启动项目
执行命令： npm run dev
最后的运行结果：
好了，到这里NodeJS环境搭建以及测试基本上都完成了。
谢谢观看！！！