Nodejs和element组件使用

港控/mmm° 2022-02-02 03:17 272阅读 0赞

## 下载安装配置 ##

*  下载Nodejs，然后下一步安装，安装在C盘就可以了，也不大。
 *  安装好后输入`node -v` 就可以查看版本
 *  然后安装npm  
    新版本默认安装了npm你可以查看一下`npm -v`  
    如果没有安装则用以下命令安装`npm install npm -g`
 *  输入`npm install -g @vue/cli` ，安装vue-cli 3.0版本的脚手架构建工具
 *  在完成步骤6的前提下，输入 vue create + 项目名称  
    例如： `vue create myfirstvue`【注意： 项目名称不能有大写字母】
 *  手动(用空格进行选择)选择组件：  
    bable  
    router  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70]  
    然后一顿回车后安装完成  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 1]
 *  启动vue服务器  
    `cd myfirstvue`  
    `npm run serve`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 2]

*  在浏览器中输入以上`http://localhost:8080/`就可以访问了

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 3]

看到以上页面，并且有Home和About页面（如果没有这两个按钮则是因为vue create myfirstvue时候没有选bable router ）可以点击互换，则证明服务器安装好了。

--------------------

## 下面先来测试一下 ##

进入目录  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 5]  
稍微改动一下，保存，现在看刚才打开的页面有什么变化。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 6]  
页面变化了。（如果出现乱码，你将你刚才变化的那个Home文件重新保存替换为UTF-8编码）。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 7]

--------------------

下面我们来写页面。在src/component下新建test.vue在其中编写一下代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 8]  
添加test点击按钮，可以用来跳转页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 9]  
添加完成保存后，这时候页面上就多出来了test按钮，点击后，链接会变化，但是页面中什么都没有，是因为还没有路由到刚写好的组件中的test.vue中。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 10]  
接下来，我们写路由，注意逗号。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 11]  
保存完后，如果页面变为hello world，如果你的没有变化刷新一下，或者重新启动项目。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 12]

--------------------

## 下面我们来用一下element组件 ##

*  首先ctrl+c结束当前服务器，然后安装element组件包`npm i element-ui -S`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 13]
 *  在main.js中配置element组件

import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    
    Vue.config.productionTip = false
    Vue.use(ElementUI);
    new Vue({ 
      router,
      render: h => h(App)
    }).$mount('#app')

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 14]

进入element网址查看现有组件  
[**element饿了吗组件网址**][element]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 15]

*  先来试着用一下栅格布局。  
    复制里面的代码  
    修改test.vue

*  然后启动服务器`npm run serve`,成功。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 16]
 *  下面来用一下这个表单  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 17]
 *  修改test.vue，将form表单放在了左边。里面script里面的是vue的东西。

<template>
    
    	<el-row>
    		<el-col :span="12">
    			<div class="grid-content bg-purple">
    				<el-form ref="form" :model="form" label-width="80px">
    					<el-form-item label="活动名称">
    						<el-input v-model="form.name"></el-input>
    					</el-form-item>
    					<el-form-item label="活动区域">
    						<el-select v-model="form.region" placeholder="请选择活动区域">
    							<el-option label="区域一" value="shanghai"></el-option>
    							<el-option label="区域二" value="beijing"></el-option>
    						</el-select>
    					</el-form-item>
    					<el-form-item label="活动时间">
    						<el-col :span="11">
    							<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
    						</el-col>
    						<el-col class="line" :span="2">-</el-col>
    						<el-col :span="11">
    							<el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
    						</el-col>
    					</el-form-item>
    					<el-form-item label="即时配送">
    						<el-switch v-model="form.delivery"></el-switch>
    					</el-form-item>
    					<el-form-item label="活动性质">
    						<el-checkbox-group v-model="form.type">
    							<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
    							<el-checkbox label="地推活动" name="type"></el-checkbox>
    							<el-checkbox label="线下主题活动" name="type"></el-checkbox>
    							<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
    						</el-checkbox-group>
    					</el-form-item>
    					<el-form-item label="特殊资源">
    						<el-radio-group v-model="form.resource">
    							<el-radio label="线上品牌商赞助"></el-radio>
    							<el-radio label="线下场地免费"></el-radio>
    						</el-radio-group>
    					</el-form-item>
    					<el-form-item label="活动形式">
    						<el-input type="textarea" v-model="form.desc"></el-input>
    					</el-form-item>
    					<el-form-item>
    						<el-button type="primary" @click="onSubmit">立即创建</el-button>
    						<el-button>取消</el-button>
    					</el-form-item>
    				</el-form>
    
    			</div>
    		</el-col>
    		<el-col :span="12">
    			<div class="grid-content bg-purple-light">右边</div>
    		</el-col>
    	</el-row>
    
    </template>
    
    
    <script> export default { data() { return { form: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' } } }, methods: { onSubmit() { console.log('submit!'); } } } </script>

*  效果：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 18]

--------------------

谢谢！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70]: /images/20220202/637e1ba4ac40489f94e1b8167dd11112.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 1]: /images/20220202/f6eb8d08c9f940e1a569f50fe65d7a59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 2]: /images/20220202/bba30e454d0d46f383160032d9390f03.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 3]: /images/20220202/a067e26b5cdd4376bf52100c7a155c92.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 4]: /images/20220202/8239fe1ca04c460ba86573fa95befdd4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 5]: /images/20220202/e2598863da6b4bafac8b4283cfb59d92.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 6]: /images/20220202/46e898af2ffe4489a2d92a0fb289b1d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 7]: /images/20220202/fbf3014e1a6d40a192ccd686d3a6cfca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 8]: /images/20220202/fd74d2d7d40b4b31adfd3a821becd872.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 9]: /images/20220202/77acf605c1de4d4da47564ffb13e693a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 10]: /images/20220202/8d195a16405144c085b83443e365cd29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 11]: /images/20220202/c07887267e86464d82eac5c48044c99b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 12]: /images/20220202/0a983076520545b1ae98c4406fa99280.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 13]: /images/20220202/592021c9dc2a45fe9a6c12c9f65d191f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 14]: /images/20220202/2984dd70279041b8b06999398d328b46.png
[element]: https://element.eleme.cn/#/zh-CN/component/installation
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 15]: /images/20220202/9fe1877ab3f34add9479f08a5cf5c324.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 16]: /images/20220202/ca4db31895894c62aed01d5a7d09c4fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 17]: /images/20220202/67d9270ea8a94f4eaadaa6fa302f8691.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70 18]: /images/20220202/c4391a1879404d43ae4819bc3299a5c5.png