Node JS服务器的地址,端口号,浏览器启动配置,如下图
#hello.vue
hello
#index.js
import Vue from 'vue'
import Router from 'vue-router'
/* 配置地址,叫组件
第一种:导入hello组件
*/
import hello from '../components/demo/hello.vue'
/*
第二种:导入hello组件
*/
import hello from '@/components/demo/hello'
Vue.use(Router)
export default new Router({
routes: [
{
/* 斜杠:代表项目的默认地址 */
path: '/',
name: 'hello', /* 组件名称:保持名称唯一性 */
component: hello /* 引入组件的别名 */
}
]
})
需求:创建一个登录页面,用nodejs作为服务器访问,步骤如下:
在components/demo目录下创建hello01.vue页面,需要注意事项
1. 表单标签一定要有一个父级标签,例如:不能直接写input标签,而是在input标签上加上div标签
登录页面
用户名:
密码:
2. 页面可以不需要定义vue绑定的标签id,因为是单页面,main.js 里面已经定义过了
3. 需要采用ES6 语法定义js
4. 数据绑定,方法定义,文档加载事件写法和vue略有不同,具体写法看源码
import Vue from 'vue'
import Router from 'vue-router'
/* 配置地址,叫组件
第一种:导入hello组件
*/
// import hello from '../components/demo/hello.vue'
/*
第二种:导入hello组件
*/
import hello from '@/components/demo/hello'
/* 配置地址,叫组件
第一种:导入hello01组件
*/
import hello01 from '../components/demo/hello01.vue'
Vue.use(Router)
export default new Router({
routes: [
{
/* 斜杠:代表项目的默认地址 */
path: '/',
name: 'hello', /* 组件名称:保持名称唯一性 */
component: hello /* 引入组件的别名 */
},
{
path: '/hello01',
name: 'hello01',
component: hello01
}
]
})
jquery.min.jshttps://www.yuque.com/attachments/yuque/0/2022/js/32505142/1662566597706-314fd278-c368-4f7f-b8be-1f06c9224e18.js
然后修改hello01.vue,引入
登录页面
用户名:
密码:
在src/assets中建立css目录,然后在写一个Test.css
.myTest{ color: red; }
引入的方法:
在App.vue中引入
应用:
结果: