创建项目
1.采用vue-cli脚手架初始化项目。
2.node+webpack+淘宝镜像
node_modules文件夹:项目依赖文件夹
public文件夹:一般放置一些静态资源,需要注意,放在public文件夹的静态资源,webpack进行打包的时候会原封不动打包到dist文件夹中。
src文件夹(程序员代码文件夹):
assets文件夹:一般也放置静态资源(一般放置多个组件共有的静态资源)，需要注意,放置assets文件夹里面的静态资源,在webpack打包的时候,webpack会把静态资源当作一个模块,打包JS文件里面。
components文件夹:一般放置的是(全局组件)
App.vue：唯一的根组件,Vue当中的组件(.vue)
main.js:程序入口文件、也是整个程序当中最先执行的文件
babel.config.js：配置文件(babel相关)
package.json文件:认为项目"身份证"，记录项目叫做什么,项目当中有哪些依赖、项目怎么运行。
package-lock.json:缓存性文件
小黑窗口
vue create 项目名
其中app是项目名
vue3.0版本创建
使用webpack来创建
vue init webpack vue-name
ws模板:
**
项目的其他配置
2.1项目运行起来的时候，让浏览器自动打开
–package.json
“scripts”: {
“dev”: “vue-cli-service serve --open”,
“start”: “vue-cli-service build”,
“build”: “vue-cli-service lint”
},
3.0版本
“scripts”: {
“dev”: “webpack-dev-server --open --inline --progress --config build/webpack.dev.conf.js”,
“start”: “npm run dev”,
“build”: “node build/build.js”
},
重点是dev这一段加上–open
2.eslint校验功能关闭
—在根目录下,创建一个vue.config.js
例如:声明变量但是没有使用eslint工具报错
module.exports={
//关闭elint
lintOnSave:false
}
3.src文件夹目录的简写方式,配置别名。例如别名@
jsconfig.json配置别名@提示【@代表的src文件夹,这样将来文件过多,找的时候方便很多】
{
“compilerOptions”:{
“baseUrl”: “./”,
“paths”:{
“@/":["src/”]
}
},
“exclude”:[“node_modules”,“dist”]
}
**
项目的路由分析
**
项目路由的分析
vue-router
前端所谓路由:kv键值对
key:URL(地址栏中的路径)
value:相应的路由组件
注意:项目上中下结构
路由组件:
Home首页路由组件，Search路由组件、login登录路由、Refister注册路由
非路由组件【首页、搜索页有】
Header（页面最上面的地方）、Footer(页面最下面的地方)[在首页、搜索页有二维码形式]注册登录页没有
如下:非路由
编写非路由组件Header与Footer业务
在这个项目中,不在以HTML+CSS为主,主要是业务和逻辑
在开发项目的时候:
1.书写静态页面(HTML+CSS)
2.拆分组件
3.获取服务器的数据动态展示
4.完成相应的动态业务逻辑
在项目的src的components下建立两个包
注意1：创建组件的时候,组件结构+组件的样式+图片资源
在Header下创建一个index.Vue
<template>
<div></div>
</template>
<script>
export default {
name: '',
}
</script>
<style scoped>
</style>
在idea创建模板
把洪辉老师写的头部结构扔进去
扔到刚刚写的index.vue中
光有结构还不行还要把样式扔进去
扔到style下
但是有语法错误问题。
注意2:咱们项目采用的是less样式，但是浏览器不识别样式，需要通过less、less-loader进行处理less,把less样式变为css样式、浏览器才可以识别。
现在我们的项目没有less和less-loader需要进行安装。
安装命令如下:
cnpm install --save less less-loader@5
注意3:如果想让组件识别less样式,需要在style标签的身上加上lang=less
如下：
这一步结束后就解决图片问题
把这一张扔到Header下的images包下面
使用组件的步骤（非路由组件）
-创建或者定义
-引入
-注册
-使用
引入步骤
在App.Vue进行
注册还是在App.Vue中进行
使用
必须放在div下才可以
关于样式不对的问题