vue项目学习笔记(工程化,前后端分离)

vue3.x创建项目方式:

  1. 终端vue create project-name
  2. Manually select features 手动创建
  3. 再选择安装Babel,Router,和Linter(2.x版本)
  4. 不选择历史模式路由 n
  5. ESLint语法版本选择 Standard config
  6. 语法规则校验 Lint on save
  7. 配置文件在 in dedicated config files
  8. 不保存为模板
  9. 创建过程中......

cd project-name

npm run serve运行

登录退出

 tips:redis-session,用户在客户端设备1登录后,服务器生成并保存对应用户的token,前端将服务器返回的token保存在客户端客户端1缓存中,在之后,客户端设备1再向服务器接口发送请求时携带保存在缓存中的token,并与服务器中的token进行比较,相同则请求成功。如果在此之前,用相同的用户名在设备2中有登录操作则服务器中再次生成的token会被更新,设备1客户端中的缓存的token与服务器中的token不一致,则请求失败。(登录拦截并且限制用户只能在一台手机登录)

 

码云中新建仓库,填写仓库名称,和路径相同,去掉“使用Readme”文件初始化这个仓库,创建。

复制Git全局设置:中的命令,在cmd中执行

进入建好的项目中输入命令git remote add origin https://gitee.com/xxxxxx/xxxx.git  与码云关联

.........

git push -u origin master上传码云

 

 git init

git add .   提交到缓存区

git commit -m "add files"   // 提交到本地

git status  工作区干净

以上是在本地的

上传到码云则git remote add origin https://gitee.com/ni_zhipeng/vue_shop.git  先与码云关联

git push -u origin master上传码云

 

css:

    position: absolute;
    left: 50%;
    top: 50%;
    // 盒子左上角在中心点 需要相对于移动自身的50%
    transform: translate(-50%, -50%);

left: 50%;
top: 50%;

使盒子左上角在屏幕正中心,transform,将盒子的往左上角移盒子本身的一半,使盒子真正在中心点。

v-model是双向数据绑定,而:model只是将父组件的数据传递到了子组件。

<!-- 登录表单区   名称占位-->
        <el-form :model="loginForm" label-width="0px" class="login_form">
            <!-- 用户名 -->
            <el-form-item>
                <!-- 前面加图标 -->
                <el-input v-model="login_form.username" prefix-icon="iconfont icon-user"></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item>
                <!-- v-model双向数据绑定 -->
                <el-input v-model="login_form.password" prefix-icon="iconfont icon-3702mima"></el-input>
            </el-form-item>
            <!-- 按钮区 -->
            <el-form-item class="btns">
                <el-button type="primary">登录</el-button>
                <el-button type="info">重置</el-button>
            </el-form-item>
        </el-form>

初学前端是收集代码块的过程,了解copy别人的思路,需要的时候用起来。

=========================================================================

将login分支合并到master分支

git add .     先放入缓冲区

git commit -m "add files"   // 提交到本地

切换分支到master:git checkout master

将login分支合并到maser:git merge login    此时master也是最新的了

将本地分支master代码提送到云端:git push

\\\\\\      将分支 login也上传到gitee

先切换到login分支

git checkout login

不能直接git push因为远程仓库中没有login分支

所以只能:git push -u origin login

=====================================================

根据token进行拦截

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // to 将要访问的路径
  // from 代表从哪个路径跳转而来
  // next 是一个函数,表示放行
  // next() 放行 next('/login') 强制跳转

  if (to.path === '/login') return next(); // 如果要去登录页直接放行
  // 获取token
  const tokenStr = window.sessionStorage.getItem('token');
  console.log(tokenStr);
  if (!tokenStr) return next('/login') //判断是否为Token, 不是则去登录页
  next()  // 是, 则放行
})

======================================================================================================

// 水平居中
  text-align: center;
  // 字母间距
  letter-spacing: 0.2em;

===================================================================================================

<!-- 侧边栏根据是否折叠显示大小 -->
<el-aside :width="isCollapse ? '64px' : '200px'">

======================================================================================================

App.vue中是Home.vue占位符,进入home页面,欢迎页面是Welcome.vue占位符。

==========================================================================================

代码格式化配置:

.prettierrc

{
    "semi": false,
    "singleQuote": true
}

=========================================================================================================

this.$refs.editFormRef.resetFields()

表单引用,重置表单,重置并不是清空。

========================================================================================================

优化vue项目

页面跳转时显示进度条NProgress:

// 在request 拦截器中,展示进度条  NProgress.start()
// 请求拦截器
axios.interceptors.request.use(config => {
  NProgress.start()
  // console.log(config)
  config.headers.Authorization = window.sessionStorage.getItem('token');  //登录时为null, 因为之前服务发出的token没有了(注销后被清除)
  return config
})

// 在response拦截器中,隐藏进度条  NProgress.done()
axios.interceptors.response.use(config => {
  NProgress.done()
  return config
})

优化策略:

1.生成打包报告

2.第三方库启动CDN

3.Element-UI组件按需加载

4.路由懒加载

5.首页内容定制

 

vue项目中配置favicon图标实现:在public文件下favicon.ico

 

spring security默认的用户名为user,密码为自动生成的。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页