Nodejs和element组件使用-蒲公英云

Nodejs和element组件使用

港控/mmm° 2022-02-02 03:17 304阅读 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

然后一顿回车后安装完成
启动vue服务器
cd myfirstvue
npm run serve

在这里插入图片描述

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

在这里插入图片描述

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

下面先来测试一下

进入目录
在这里插入图片描述

稍微改动一下，保存，现在看刚才打开的页面有什么变化。

页面变化了。（如果出现乱码，你将你刚才变化的那个Home文件重新保存替换为UTF-8编码）。

下面我们来写页面。在src/component下新建test.vue在其中编写一下代码
在这里插入图片描述
添加test点击按钮，可以用来跳转页面

添加完成保存后，这时候页面上就多出来了test按钮，点击后，链接会变化，但是页面中什么都没有，是因为还没有路由到刚写好的组件中的test.vue中。

接下来，我们写路由，注意逗号。
在这里插入图片描述
保存完后，如果页面变为hello world，如果你的没有变化刷新一下，或者重新启动项目。

下面我们来用一下element组件

首先ctrl+c结束当前服务器，然后安装element组件包npm i element-ui -S
在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’)

在这里插入图片描述

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

在这里插入图片描述

先来试着用一下栅格布局。
复制里面的代码
修改test.vue
然后启动服务器npm run serve,成功。
下面来用一下这个表单
修改test.vue，将form表单放在了左边。里面script里面的是vue的东西。

<script> export default { data() { return { form: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' } } }, methods: { onSubmit() { console.log('submit!'); } } } </script>