Vue3-学习笔记-01

一、Quickstart

1.创建项目文件夹，在目标文件夹根目录下 进入powershell使用cmd 指令npm install -g @vue/cli 选择安装自定义依赖即可

或者 推荐使用vite的方式启动项目

npm init vite-app demo # 或 yarn create vite-app demo # 进入demo文件夹 npm install # 或 yarn npm run dev # 或 yarn dev

安装yarn：npm install -g yarn

目录结构|-node_modules -- 项目依赖包的目录

|-public              -- 项目公用文件
  |--favicon.ico      -- 网站地址栏前面的小图标
|-src                 -- 源文件目录，程序员主要工作的地方
  |-assets            -- 静态文件目录，图片图标，比如网站logo
  |-components        -- Vue3.x的自定义组件目录
  |--App.vue          -- 项目的根组件，单页应用都需要的
  |--index.css        -- 一般项目的通用CSS样式写在这里，main.js引入
  |--main.js          -- 项目入口文件，SPA单页应用都需要入口文件
|--.gitignore         -- git的管理配置文件，设置那些目录或文件不管理
|-- index.html        -- 项目的默认首页，Vue的组件需要挂载到这个文件上
|-- package-lock.json --项目包的锁定文件，用于防止包版本不一样导致的错误
|-- package.json      -- 项目配置文件，包管理、项目名称、版本和命令
查看官网可以参考https://cn.vuejs.org
vue的特点
　　1) 遵循MVVM模式
　　2) 编码简洁，体积小，运行效率高，适合移动/PC端开发
　　3）本身只关注UI，可以轻松引入vue插件或其它第三方库开发项目

二、Vue扩展插件

　　vue-cli:vue脚手架
　　vue-resource : ajax请求
　　vue-router: 路由
　　vuex: 状态管理
　　vue-lazyload 图片懒加载
　　vue-scroller 页面滑动相关
　　mint-ui 基于vue的UI组件库(移动端)
　　element-ui:基于vue的UI组件库(PC）

三、项目实战 电商管理系统

3.1 前端项目初始化步骤
　　①安装Vue脚手架
　　②通过Vue脚手架创建项目
　　③配置Vue路由
　　④配置Element-UI库
　　⑤配置axios库
　　⑥初始化git远程仓库
　　⑦将本地项目托管到GitHub或码云中实战中可以通过vue可视化的方式来创建Vue项目 
　　在win-R中输入cmd 输入vue ui进入可视化操作页面 按照上面的步骤创建项目 注意引入router依赖
　　当然也可以直接vue create命令在cmd中使用项目托管到github或者码云gitee中

　　项目后端接口地址https://www.liulongbin.top:8888/api/private/v1/

3.2 登录功能原理 用token来实现令牌接口

3.3 登录功能的实现
通过Element-UI组件来实现
①el-form
②el-form-item
③el-input
④el-button
⑤字体图标

目录结构详解
main.js文件是整个项目的入口，所有项目的依赖都被配置在了main.js中，例如导入 vue等
app.vue是整个项目的架构文件

<template>标签是结构 <script>是行为 <style>是样式
components文件夹下的是组件
router文件夹下的index.js是默认路由配置
在项目初始化后 我们可以把app.vue中不需要的组件都删掉 包括<script>中的注册组件以及<style>中对于组件样式的编辑都删掉
component中用不到的组件可以注释掉或者直接delete

一个组件中是由三个部分组成的 分别是结构、样式和行为
我们如果想要实现一个组件，这三个部分都要被实现 新建一个Login.vue文件，代码如下

<template>
    <div>
        登录组件
    </div>
</template>

<script>
export default {}
</script>

<!--scoped表示当前样式仅在本组件中生效，去掉则变成全局样式-->
<style lang="less" scoped> 
</style>

紧接着我们要在router文件夹下的index.js中注册这些组件

 

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/login', component: Login }
]

const router = new VueRouter({routes})

export default router

 

最后要在app.vue中留出router的位置<router-view>

<template>
  <div id="app">
    <!--路由占位符-->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
}
</script>

<style>
</style>

增加重定向 于router目录下的index.js文件夹中添加path redirect即可 注意要在routes:[]的定义中

  { path: '/', redirect: '/login'},

欲使用less组件 需要安装css扩展样式的less 和 less-loader 本文上述的代码在less-loader的最新样式可能会报错 安装低版本的less-loader即可

使用命令行 npm install less less-loader --save-dev

然后 npm uninstall less-loader

npm install less-loader@7.3.0即可