前台项目第一天(1-6)
----1：vue-cli脚手架初始化(搭建)项目
环境 node + webpack + cnpm(淘宝镜像)
cmd
vue create 项目名称
选项 default默认vue2版本
文件分析
node_modules 项目依赖的模块
public文件 静态首页 一般静态资源(图片) webpack会原封不动的打包到dist文件夹中
src 源代码文件
src/assets文件夹 通常放静态资源 (多个组件共用的静态资源) 注意 此文件夹的静态资源 webpack会当做一个模块 打包js文件里面
src/components文件夹 一般放的是非路由组件(全局组件)
src/App 唯一的根组件 V当中的组件 以.vue后缀 react以 .jsx后缀
src/main.js 程序入口文件 整个程序当中最先执行的js文件
babel.config.js 配置文件 (babel相关)
package.json 记录项目版本 项目所包含的信息 运行方式
package-lock.json 缓存性文件 首次打开慢 之后就快了
README.md项目说明
项目的其他配置
项目运行时 浏览器自动打开
----package.json中 script:{vue-cli-service serve --open}
eslint校验功能关闭
vue.config.js中 配置 lintOnSave:false
src文件夹简写方式 配置别名 简化路径 @
/jsconfig.json文件
{
“compilerOptions”: {
“target”: “es5”,
“module”: “esnext”,
“baseUrl”: “./”,
“moduleResolution”: “node”,
“paths”: {
“@/": [
"src/”
]
},
“lib”: [
“esnext”,
“dom”,
“dom.iterable”,
“scripthost”
]
}
}
3.项目路由分析
路由 当做KV键值对
K代表url(地址栏中的路径)
v代表相应的路由组件
项目ui 分析 上中下结构 哪些是共用的(也就是都有的) 哪些是独有的
非路由组件
头部Header和底部footer是共用的 (在首页和搜索页是有的) 在登录页和注册页无
路由组件
首页home 对应的v 就是中间部分的内容 头部和底部是共用的
搜索Search
login登录组件
Refister注册组件
4.完成非路由组件Header与Footer组件业务
----4.1.先静态页面书写 图片 结构 样式
----4.2.拆分组件
----4.3.获取服务器的数据动态展示
----4.4.完成相应的动态业务逻辑
在src/components分别新建 Header文件和Footer非路由组件
搭建各组件结构和所需图片、样式资源
项目采用less样式 浏览器不识别less样式 需要通过less.less-loader【安装5版本】进行处理
如果想让组件识别less样式 需要在style标签身上加上lang-less
分别在/src/components/Header/新建images文件夹添加图片
-----4.5使用组件之步骤 (非路由组件)
---- App根组件 使用一个非路由组件
----创建或定义
----引入 import
----注册 components
----标签形式使用
5路由组件的搭建
vue-router插件
路由组件有四个 Home Search Login Register (各个是独有的)
在/src/pages|views文件夹 放置路由组件
----5.1.配置路由
/router/index.js
----并 进行重定向 访问 / 立即定向到首页
//分别引入路由组件
import Home from '@/pages/Home/index.vue';
import Search from '@/pages/Search/index.vue';
import Login from '@/pages/Login/index.vue';
import Register from '@/pages/Register/index.vue';
Vue.use(VueRouter);
const routes = [
{
path:'*',
redirect:'/home',
},
{
path:'/',
component:Home,
},
{
path:'/search',
component:Search,
},
{
path:'/login',
component:Login,
},
{
path:'/Register',
component:Register,
}
]
const router = new VueRouter({
routes
})
export default router
----在入口文件main.js中 import 引入 import router from ‘./router’
----注册 new Vue({
//注册路由 信息 组件身上拥有了 r o u t e 和 route和 route和router属性
router,
render: h => h(App)
}).$mount(‘#app’)
----此时 组件身上拥有 r o u t e 和 route和 route和router两个属性
----5.2总结
路由组件与非路由组件的不同
------5.2.1.路由组件 放置在pages或者在views文件夹里面
------------非路由组件 放置在components文件夹里
------------路由组件 需要在/router/index.js中进行引用和注册(使用的即为组件的名字)
------------在App.vue根组件中 使用路由组件 需要使用
------------非路由组件 一般都是以标签的形式使用
5.2.2注册路由之后
$route:一般获取路由信息 【路径 query params等等】
$router: 进行编程式导航进行路由跳转【push|replace】另外二者的区别 其实就是有无历史记录
5.3路由的跳转?
5.3.1路由的跳转有两种形式: 声明式导航 router-link, 务必有to=''属性 往哪跳
5.3.2 编程式导航push|replace (功能全面) 除了路由跳转 还可以做业务逻辑 例如 登录页 需要收集用户名和密码发请求 进行和服务器校验