Vue的初始化项目文件搭建笔记 ----每一步都记录下来了

vue 的初始化文件操作

这个项目可能用到的技术:

        用的技术: vue, vue-router, axios, token, localStorage, ElementUI, echarts, 富文本编辑器

项目初始化的目标:

  • 创建项目(vue-cli)
  • 调整项目目录(遵循企业开发)
  • git 代码托管 (github, gitee)
  • 引入第三方库 ElementUI
  • 封装请求模块

让我们开始使用vue-cli创建项目

创建项目命令 :vue create 项目名

接下来会弹出来3个选项:

? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features //让我们选第三个自己选择初始项,这样可以更全面的开发

选择初始项了,基本可以按照这样去选择

在这里插入图片描述

选择完就是这样了,棒棒哒,给自己点个赞!

在这里插入图片描述

接下来选择vue的版本 3.0刚出来不太稳定,我们在这里选择2.0的

在这里插入图片描述

这里选择是否history模式

我们选怎hash模式,因为history模式需要后台来做一些操作
我们选择

这里选择css的预处理(主流的Less和Sass)

在这里插入图片描述

这里选择Eslint (代码标准化)选择标准的就可以

一个可以让刚接触eslint的人可以爽到爆的选项,从此就是真的在写bug了,当然也是为了让我们的代码更加的标准化。
在这里插入图片描述
那么下面的这个插件和ESLint规则表https://cn.eslint.org/docs/rules/可以智能的帮我们解决一部分简单的bug
在这里插入图片描述

接下来选择校验时机

在这里插入图片描述

选择配置文件的升成方式(我们选择生成到单独文件内)

在这里插入图片描述

最后等待安装,项目初始化完成

在这里插入图片描述

出发,开始启动项目了

npm run serve

我们写完项目是要提交到远程仓库的,这里github和gitee都可以,我们选择gitee码云

VueCLI 在创建项目的时候vue-cli自动帮你初始化了 Git 仓库,并且基于初始代码默认执行了一次提交。
我们可以创建远程仓库, 并且将本地仓库推送到远程仓库。

让我们动手在码云创建一个远程仓库

在这里插入图片描述

接着将代码推送到远程仓库内

https 和 ssh 都可以, https需要输入一次账号密码, ssh需要配置一下

git remote add origin https和ssh路径
git push -u origin master//这里-u之后 以后git push 默认推送到名为origin master的远程仓库

-u 表示将 push 命令, 和当成提交的仓库地址, 仓库分支进行关联
一旦进行关联了, 将来只需要 git push 即可
如果没有显示错误,你就可以回到码云上检查一下,是否代码提交已经成功

当然也可能会出现下面的错误,让我们来看看解决办法

密码 或者 用户名 输入错误, 就提交不上去了, 因为记住了错误的密码
解决方案:控制面板-》用户账户=》管理window凭据==》删除本地凭证,重新输入用户名,密码
在这里插入图片描述

如果使用 ssh需要配置公钥

注意我们的github和gitee的公钥是相同的,所以不需要重新获取,不然github的也需要同步修改
-1. 本地生成 公钥 和 私钥 (不需要再次生成)
-2. 之前将 公钥粘贴到 github 上, 配好了
现在码云也需要配, 只需要第二步, 将本地的公钥
在这里插入图片描述
粘贴到码云的这个地方就完成了
在这里插入图片描述

接下来就是调整整个初始化目录的结构了

为了更好的实现后面的操作,我们把整体的目录结构做一些调整。

目标:

  1. 删除初始化的一些默认文件
  2. 修改没删除的文件
  3. 新增我们需要的目录结构

修改文件

修改router/index.js 里面的

在这里插入图片描述

修改App.vue 里面的

在这里插入图片描述

删除以下不需要的文件

  • src/views/About.vue
  • src/views/Home.vue
  • src/components/HelloWorld.vue
  • src/assets/logo.png

新增以下目录

  • src/api 目录
    • 存储接口模块 (发送ajax请求接口的模块)
  • src/utils 目录
    • 存储一些工具模块 (自己封装的方法)
  • src/styles 目录
    • 新增base.less 文件,设置全局样式
    • 在 main.js 中加载全局样式 import ‘./styles/base.less’
      在这里插入图片描述
  • src/assets目录
    • 新增项目使用的素材

目录效果如下:

在这里插入图片描述
到这里我们的项目就集体搭建完毕了,祝大家天天发财,年年有余

                                                                             不见经传: 焦小布
                                                                                     
                                                               2020-10-25   星期日   晚9:00点

猜你喜欢

转载自blog.csdn.net/weixin_48383564/article/details/109277799
今日推荐