Vue项目前期准备

技术栈：

1. Axios: 使用Ajax进行异步数据获取；
2. VueRouter: 多页面之间的路由；
3. Vuex: 各个组件之间的共享；
4. 异步组件：代码上线性能更优；
5. Stylus:编写前端样式；
6. 递归组件：组件自身调用自身；
7. 插件：Swapper插件 轮播图
8. 公用组件：组件拆分 封装

环境安装

1. node npm 安装(查看版本号：node -v npm -v)
2. git 安装 （查看版本号： git --version）—GitHub（1. Git配置与使用；；2.vs code使用git）上建仓库 本地建一个存放项目的文件夹Project 在终端cd到该目录下 git init 初始化本地仓库 git clone 远程仓库的项目project1 这样就把本地仓库的master分支与远程仓库的origin/master分支进行关联
3. webpack安装和vue-cli脚手架安装。首先mac下安装这些需要获取权限：终端输入：sudo -s 输入密码之后就可以按照npm install webpack -g —>npm install -g vue-cli 。接下来使用vue-cli脚手架工具初始化vue项目–> cd 到本地仓库【project】：也是需要先sudo -s 输入密码之后再按照vue init webpack project1（中间会手动选一些配置项 是否使用npm是否使用Eslint进行语言检查等）—>cd project1—>npm install -->npm run dev
   【注意 Mac 上安装vue-cli webpack时都需要获取权限 在中终端输入sudo -s 然后输入密码 接着输入nom install -g vue-cli 和 npm install webpack -g 以及使用脚手架初始化项目vue init webpack my-project】—以上安装是vue2.9.6版本的，安装3.x需要sudo -s输密码后npm uninstall -g vue-cli 先卸载原来版本然后npm install -g @vue/cli
4. 本地项目project1下就完成vue项目的初始化工作，生成很多文件 跟远程仓库不一致，需要把线下代码同步到线上：git status（查看本地仓库有哪些改动）–>git add.(把改动的文件加入本地缓冲区)—> git commit -m “project1 initialized” —>git push 即可 就把本地代码推到线上了。
5. 参考博客
   使用vue-cli快速搭建项目

流程命令汇总：

1. 首先配置本地配置git —如果是第一次使用的话可参考git配置与使用
2. 远程新建仓库project-travel—如果需要配置ssh的话可参考Mac vs code中配置git
3. 本地建项目文件夹-本地仓库Project
4. cd Project --> git clone [email protected]*****/project-travel.git. 【把远程分支代码克隆到本地仓库Project目录下 Project/project-travel 这样本地master 与origin/master关联】
5. sudo -s 【输密码 无论是webpack vue-cli 安装还是使用vue-cli初始化项目 mac下均需要获取权限】
6. vue init webpack project-travel 【本地仓库下初始化vue项目】
7. npm run dev 启服务 进行项目开发
8. git add.
9. git commit -m “project initialized”
10. git push 【把本地master分支同步到远程origin/master上】
11. git checkout -b dev 【本地新建开发分支dev】
12. git push origin dev【远程也会新建一个dev分支，本地开发分支新开发的代码push到远程分支dev】
13. git pull origin dev 【如果多人同时使用远程dev开发分支 则自己每次往远程dev分支push之前都需要拉一下远程的dev分支】
    或者：
    git checkout -b dev
    git add .
    git commit -m ‘comments’
    git push origin dev
    git checkout master
    git merge origin/dev
    git push

vue项目目录

package.json: 项目的依赖包；
package.lock.json : package的锁文件，规定安装包的版本，保持团队编程的统一；
index.html： 首页的模版文件；
gitignore： 不想提交到线上的特殊的文件；
eslintrc.js: 代码规范 代码检验；
eslintignore: 不做代码检验的文件目录；
editconfig:配置编辑器的语法（tab代表两个空格缩进等）；
babellrc: 进行语法解析，转化成浏览器能够理解执行的语法；
static:目录下放静态数据（比如自己模拟的json数据）；
node_modules:依赖的node包；
src: 放整个项目的源代码，
其中：
main.js是整个项目的入口文件;
App.vue放原始的根组件;
router->index.js放整个项目的路由；
components：放项目使用的组件；
assets：项目中用到的图片资源；
config：放项目的配置文件；
其中：
index.js: 放基础的配置信息；
dev.env.js： 开发环境的配置信息；
prod.env.js: 线上生产环境的配置信息；
build: 项目打包的webpack的配置信息；
其中：
webpack.base.conf.js :配置webpack基本的配置项；
webpack.dev.conf.js ：配置webpack开发环境的配置项；
webpack.prod.conf.js ：配置webpack生产环境的配置项；

vscode改文件每次都会Insufficient permissions. Select ‘Retry as Admin’ to retry as administrator.

参考博客：
可解决该问题
未尝试，应该也OK
好像不太行

vscode command+s 自动保存按照eslint自动格式化：

参考博客：
vscode格式化aslant–亲测好用
如果配置了setting.json ：

//  #去掉代码结尾的分号 
  "prettier.semi": false,
  //  #使用单引号替代双引号 
  "prettier.singleQuote": true,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #这个按用户自身习惯选择 
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #让vue中的js按编辑器自带的ts格式进行格式化 
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
     
    "js-beautify-html": {
     
      "wrap_attributes": "force-aligned"
      // #vue组件中html代码格式化样式
    }

编辑器保存的时候仍然eslint报错 比如自动添加分号，老是双引号 这时，解决办法可参考：// #每次保存的时候自动格式化 "editor.formatOnSave": false,
另外可以参考：editor.formatOnSave": false也不管用时可参考

Vue-cli脚手架安装 2.X 3.X【mac】

参考博客：
Mac上安装Vue2.9,6
Mac上安装Vue3.X 卸载2.X
使用vue-cli快速搭建项目
Mac下安装正确运行Vue
Mac卸载2.9.6 安装3.X版本遇到的问题
Vue3.X基础安装使用
Vue2.X Vs Vue3.X
Mac 启服务每次开启新端口 关闭方法