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 上, 配好了
现在码云也需要配, 只需要第二步, 将本地的公钥
粘贴到码云的这个地方就完成了
接下来就是调整整个初始化目录的结构了
为了更好的实现后面的操作,我们把整体的目录结构做一些调整。
目标:
- 删除初始化的一些默认文件
- 修改没删除的文件
- 新增我们需要的目录结构
修改文件
修改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点