04-vue-cli-启动配置和静态资源配置

一.启动配置

1、index.js中配置

Node JS服务器的地址，端口号，浏览器启动配置，如下图

2.导入hello组件的方式：

#hello.vue
 
 
 
<script>
  // js代码
script>
 
<style>
  /* 样式 */
style>

#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  /*  引入组件的别名   */
    }
  ]
})

3.案例：基于vue-cli的登录页面设计

需求：创建一个登录页面，用nodejs作为服务器访问，步骤如下：

在components/demo目录下创建hello01.vue页面，需要注意事项

1. 表单标签一定要有一个父级标签，例如：不能直接写input标签，而是在input标签上加上div标签

 
<script>
  // 默认导出,ES6语法
  export default {
    name:"",  //描述组件的名称
    data(){   //数据绑定，对应的是data：{}
      return{
          userInfo:{ //绑定用户对象
          userName:"",
          userPwd:""
          }
      }
    },
    methods:{ //定义函数
      login(){ //登录，取消了function
        alert(this.userInfo.userName);
      }
    }
 
  }
script>
 
<style>
style>

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
    }
  ]
})

 

二、静态资源配置

1.引入js方法：在static下面引入js

📎jquery.min.jshttps://www.yuque.com/attachments/yuque/0/2022/js/32505142/1662566597706-314fd278-c368-4f7f-b8be-1f06c9224e18.js

然后修改hello01.vue,引入

 
<script>
  // 默认导出,ES6语法
  export default {
    name:"",  //描述组件的名称
    data(){   //数据绑定，对应的是data：{}
      return{
          userInfo:{ //绑定用户对象
          userName:"",
          userPwd:""
          }
      }
    },
    methods:{ //定义函数
      login(){ //登录，取消了function
        var title = $("#title").text();
        alert(title);
      }
    }
  }
script>
 
<style>
style>

2.引入css的方法：针对于src/assetes目录

在src/assets中建立css目录，然后在写一个Test.css

.myTest{
color: red;
}

引入的方法：

在App.vue中引入

应用：

结果：