搭建一个前端架子步骤 --vue

创建一个仓库

1.首先需要一个代码仓库，可以选择github 或者 公司自己搭建的gitlab
2. 以github为例， 创建一个仓库，然后创建一个readme文件,
里面介绍项目信息,这里按照github的说明进行就好了
（创建好之后，运行git init 初始化当前的仓库 git add git commit git push)
3. 创建一个lisence，一般选择MIT
4. 接着看需要用什么第三方的东西，js一半都是npm 这里我们需要用npm

怎么用npm?首先需要确保装了Node ,装了Node之后就自带一个npm的命令，
复制代码

初始化我们的仓库

接着使用npm 来初始化我们的项目 运行： npm init

填写一些项目信息

5. 然后我们会发现 项目文件中多了一个package.json的文件
复制代码

选取项目的框架，这里我们选取vue

6. 接下来就是考虑要底层代码用什么，比如我们要用vue
7. 安装vue: npm i vue (从npm6开始 --save是默认的，i 就是 install的简写
也就是上面命令： npm install --save vue)
8. vue安装成功之后，我们会发现多了node_modules文件，里面就是vue文件
(
这里我们去git 添加的时候，会发现有很多的文件需要提交，
所以我们要新建一个.gitignore,注意文件前面有个点，
里面写入node_modules/,意思就是让git 忽略这个文件，
不要上传到git 仓库以后你不需要上传的都可以写在这里面
)
复制代码

选取构建工具

vue可以在一个文件里面写入html js 还有css 这个就需要借助构建工具
9.选择构建工具： 如：parcel ,webpack

比如我们现在要用parcel ,新接触一个东西时就先看他的官网
// npm install -g parcel-bundle 全局安装
// npm install -D parcel-bundle 局部安装

安装vue的时候 因为vue是给用户用的所以不加 -D，
如果一个包是给用户使用的就不需要 -D
如果是给开发者使用 就加一个 -D
-g 是全局安装，也是给开发者使用的

安装完成之后，可以看到package.json文件中的区别如下：
"dependencies": {
    "vue": "^2.5.17"
  },
  "devDependencies": {
    "parcel-bundler": "^1.10.3"
  }
复制代码

使用parcel：
1. 新建一个src文件夹
2. src中新建一个app.js文件
3. html中引入app.js文件，所以app.js就是文件入口，所有文件从这里引入
4. 新建一个 组件，比如 button.vue文件
5. 在app中引入这个组件 import Button from './button';
6. 全局引入组件 Vue.component('g-button',Button);
7.运行下parcel: npx parcel index.html --no-cache (这里是去除缓存的意思)
8. 这个时候parcel会去安装你需要的所有的东西，不需要你进行配置（零配置）
9. 这个时候可能会报错，你需要根据vue的文档再来配置下parcel

rm -rf .cache dist 通过这个命令可以去除上一次编译的残渣
以保证这一次的打包是最新的
复制代码

webstorm

1. 快捷键： 双击shift键
2. 搜索： vcs(version control system) 版本控制系统
3. 点击  vcs之后 进入vsc operation面板 ，点击你想要的命令操作行
commit push 等git 操作
复制代码

在写按钮的样式时，可以写成：padding: 0 1em; 
也就是左右两天各空一个字的大小，比较好
复制代码

css变量的使用

:root {
    --font-size: 14px;
    --button-height: 20px;
}
.button {
    height: var(--button-height);
    font-size: var(--font-size);
}
复制代码

运行parcel

npx parcel index.html --no-cache : 意思就是在当前目录中找parcel去运行parcel
复制代码

package.json

"scripts": {
    "dev-test": "parcel watch test/* --no-cache & karma start",
    "test": "parcel build test/* --no-cache --no-minify && karma start --single-run"
  },
  
  当我们运行npm run test 的时候，就会执行 package.json 里面的这段命令
  "parcel build test/* --no-cache --no-minify && karma start 
  --single-run"
  
  这个命令的意思就是： 让parcel去打包test文件夹下面的所有文件（test/*意思就是test
  文件夹
 下的所有文件）
  --no-cache : 不要缓存
  --no-minify: 不要最小化 不要压缩
  karma start: 启动karma
  --single-run : 只启动一次
复制代码

ctrl+a 可以到命令行的最开头
ctrl+e 可以到命令行的最结尾

复制代码

关于打包

npx parcel: 意思是找到我的node_modules下的parcel
npx parcel build test/* --no-cache --no-minify 
运行上面这个 parcel就会去打包 test文件下的所有文件

打包后的文件会存在于dist 文件夹下，我们可以发现 会出现 css文件，js文件还有map文件
复制代码

为什么要打包？

因为，我们在js文件里面用了很多语法
比如说import Vue from 'vue' 
这种语法浏览器是不认识的，至少目前是不认识的，当浏览器执行到这句的时候，就会报错

那么打包就会做一些例如翻译的事情，
比如 会把vue的源代码拷贝进行，再将vue变成一个变量暴露出来，大概是这样子
所以 我们可能发现 打包之后的代码 特别多，因为大部分是vue的源代码

复制代码

npx parcel watch test/* --no-cache karma start
 运行watch命令之后会进行一次打包再监听
 
 watch : 只要一改了代码，就会重新打包代码，只要一重新打包代码，karma就会进行测试
复制代码