README.md · xu_coder/vue-cli2-demo

# vue-cli2-demo

> first cli2 project

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report
```

For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

## vue cli 脚手架工具的使用
所谓的脚手架工具指的是 vue cli ,如果你的项目是大型的，那么你必然会使用到 vue cli 进行开发

使用 vue-cli 可以快速搭建 vue 开发环境，以及对应的 webpack 配置， CLI ( Command-Line Interface )命令行界面

安装方式：全局安装 npm i -g @vue/cli 这个是脚手架 3及以上的安装 的安装方式

3的版本的创建项目的方式 ： vue create my-project

使用脚手架2 的方式就是安装 3 然后拉取一个模板
Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：
npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

脚手架2 的构建过程： 1. 文件夹下执行命令 vue init webpack 创建文件夹名称
                   2. 填写项目名称 默认是项目文件夹名称，接着是项目描述
                   3. 项目的作者信息，默认是自己配置的 git 的信息C:\Users\一根葱\.gitconfig 里面的内容 
                   4. 选择是 runtime-only还是 runtime-only + compiler 都要，及是否安装 vue-router 路由
                   5. ESLint 检测代码规范
                   6. 单元测试功能 以及 e2e 自动化测试
                   7. 选择安装方式是 npm 还是 yarn 
To get started:
  cd vue-cli2-demo
  npm run dev
代表安装成功

### 安装完成后 目录build 和目录 config 都是配置文件 我们可以从 package.json 的scripts进行查看 
1. build属性是指向的，指令执行的是 build/build.js 这个文件， 我们的打包执行的的过程文件配置
2. build下的 webpack.base.config.js 是公共的配置文件 webpack.dev.config.js 是用于开发的配置文件 webpack.prod.config.js 是用于正式 npm run build 打包的文件 
3. config文件夹下的配置文件 定义的都是公共变量 index.js配置了端口号 是否自动打开浏览器等信息 另外两个配置文件分别是开发配置文件 和生产配置文件
4. src文件夹 用于开发 static文件夹用于放置静态的文件 放在该目录下的文件打包使用的时候会原封不动的打包到 dist 文件夹下
5. .babellrc 文件 定义文件转换配置
6. .editorconfig 对项目的代码进行相关的约束 例如编码 空格等
7. .eslintignore 对项目下那些文件不进行 ESLint 的检测
8. .gitignore 对文件上传到 git\gitee 的文件进行忽略
9. .eslintrc.js 对代码进行检测的文件
10. .postcsssrc.js 对代码进行 css 转化的文件
11. package.json 进行的包管理功能 指定安装的包的大致版本
12. package-lock.json 记录的是我们项目安装的外部包的真实的安装版本
13. README.md 项目相关的文档

### 如何关闭 ESLint , 在config下的 index.js 找到 useEslint 并修改为 false；

## runtime+compiler 和 runtime-only的区别
1. main.js的根组件的渲染的方式不一样 runtime+compiler是组件注册的方式 runtime-only是运用的 render函数进行渲染
2. 传统的 runtime+compiler 组件的转换过程 template->ast->render函数->virtual dom虚拟dom -> ui 渲染 然而 runtime-only的转换过程就直接从render开始 代码量更少，速度更快
3. render函数： 将组件解析成 html+css 标签文件进行渲染，引入.vue文件的时候，由 vue-template-compiler 进行编处理

# 脚手架3 vue CLI3
### vue cli3是基于webpack4 打造，vue cli2 是基于 webpack3 打造
### vue cli3 的原则是 “ 0配置 ”， 移除根目录下面的 build 和 config 的配置文件
### vue cli3 提供了 vue ui 命令，提供了可视化的配置，更加人性化
### 移除了static 文件夹，新增了 public 问价夹，并且将 index.html 放到了public 文件夹中

## 脚手架3创建过程：
1.  创建 vue create 项目名称 ，
2.  选择配置信息：选择是默认的 Babel 和 ESLint 还是进行（手动的）自定义特征
3.  如果选择手动的，就会自动选择配置 Babel 、typescript、router、vuex等很多信息，空格打上星号 代表选中，enter 执行下个配置
4.  我们一般选择手动配置，接下来是选择是将配置文件独立文件夹进行配置还是生成到 package.json 文件中，我们一般选择配置到 独立的文件夹中
5.  这一步代表的是 是否将我们的的配置信息保存下来，方便我们下次使用，save this sa a preset for future projects 
6.  当我们选择保存配置信息时，我们会为我们的配置信息命名一个名字 save project as:，下次创建项目在第二步就会出现我们这次保存的配置信息供我们选择
7.  最后是让我们选择是 npm 安装还是 yarn 安装
8.  我们保存了自定义的手动配置后 会在本地c盘：C:\Users\一根葱\.vuerc 中，里面都是配置的信息
9.  相比于脚手架2创建的项目，脚手架3创建的项目更加简洁

xu_coder/vue-cli2-demo

简介

发行版

贡献者

近期动态

xu_coder/vue-cli2-demo .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

xu_coder/vue-cli2-demo