开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第26天，点击查看活动详情
配置项目的其他配置
- 首先配置项目运行起来后，自动打开浏览器 怎么配置呢？首先要找到package.json文件，其中有一个scripts的属性，在serve属性里 "serve": "vue-cli-service serve",后面加上--open
"serve": "vue-cli-service serve --open",
-
因为eslint太烦人，eslint校验功能的关闭， 比如：声明了变量未使用，项目就挂了，不能正常启动了。 在根目录创建一个vue.config.js配置文件，module.exports={ lintOnSave:false }
-
src文件夹的简单写法，配置一个别名 一般都是用@为src的别名，这样一来，将来文件太多，路径太复杂时，找文件就不用考虑太多，直接用@就定位到src目录了，配置方法，在根文件创建一个jsconfig.js path属性配置就是将@/*替换成src/*的意思
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}
项目路由的分析
前端所谓的路由： 可以当成kv的键值对，key:就是url(地址栏的路径) value:相应的路由组件 搞一个home组件和search组件，然后header和footer是共用的，他们两个不是路由组件，所以这两个组件应该放在components文件夹里 在这个项目里，不再以css+html为主，主要搞业务，逻辑，在开发的时候， 书写静态页面，拆分组件，获取服务器动态的数据并展示，完成相应的动态业务逻辑 注意点，创建组件的时候
实现header组件
写点css美化一下就完成了
<template>
<header class="header">
<!-- 头部的第一行 -->
<div class="top">
<div class="container">
<div class="loginList">
<p>尚品汇欢迎您！</p>
<!-- 没有用户名：未登录 -->
<p v-if="!userName">
<span>请</span>
<!-- 声明式导航：router-link务必要有to属性 -->
<router-link to="/login">登录</router-link>
<router-link class="register" to="/register">免费注册</router-link>
</p>
<!-- 登录了 -->
<p v-else>
<a>{{userName}}</a>
<a class="register" >退出登录</a>
</p>
</div>
<div class="typeList">
<router-link to="/center/myorder">我的订单</router-link>
<router-link to="/shopcart">我的购物车</router-link>
<a href="###">我的尚品汇</a>
<a href="###">尚品汇会员</a>
<a href="###">企业采购</a>
<a href="###">关注尚品汇</a>
<a href="###">合作招商</a>
<a href="###">商家后台</a>
</div>
</div>
</div>
<!--头部第二行 搜索区域-->
<div class="bottom">
<h1 class="logoArea">
<!-- router-link组件本省就是一个a标签 -->
<router-link to="/home" class="logo">
</router-link>
</h1>
<div class="searchArea">
<form action="###" class="searchForm">
<input
type="text"
id="autocomplete"
class="input-error input-xxlarge"
v-model="keyword"
/>
<button
class="sui-btn btn-xlarge btn-danger"
type="button"
>
搜索
</button>
</form>
</div>
</div>
</header>
</template>
<script>
export default {
name: "header",
data() {
return {
//响应式数据，用于收集表单元素文本内容
keyword: "",
userName:""
};
},
methods: {
},
mounted() {
},
};
</script>
