vue基础篇 10 Vue cli

最新推荐文章于 2021-10-30 19:56:38 发布

LeyoBiang

最新推荐文章于 2021-10-30 19:56:38 发布

阅读量132

点赞数

分类专栏： vue 前端文章标签： vue webpack 前端 vue.js node.js

本文链接：https://blog.csdn.net/qilie_32/article/details/114751069

版权

前端同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

vue

12 篇文章 0 订阅

订阅专栏

10 Vue cli

使用前提

Node

cnpm安装

由于国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。

你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了：

cnpm install [name]

Webpack

Vue.js官方脚手架工具就使用了webpack模板
- 对所有的资源会压缩等优化操作
- 它在开发过程中提供了一套完整的功能，能够使得我们开发过程中变得高效。
Webpack的全局安装
- npm install webpack -g

使用

安装Vue脚手架

npm install -g @vue/cli

注意：上面安装的是Vue CLI3的版本，如果需要想按照Vue CLI2的方式初始化项目时不可以的。
```
npm install -g @vue/cli-init
```
Vue CLI2初始化项目
- vue init webpack my-project
Vue CLI3初始化项目
- vue create my-project

vue cli2

执行npm install -g @vue/cli-init安装全局vue cli2后初始化vue init webpack my-project

会弹出下列选项

? Project name demo//项目名
? Project description A Vue.js project//描述
? Author biang <921097712@qq.com>//作者
? Vue build standalone //选择vue的版本
? Install vue-router? No //是否安装路由器
? Use ESLint to lint your code? Yes //是否用ESlint规范你的代码
? Pick an ESLint preset Standard //选择规范版本（选择了上面y才会有这个）
? Set up unit tests No //是否要设置单元测试
? Setup e2e tests with Nightwatch? No //是否要设置端对端测试
? Should we run `npm install` for you after the project has been created? (recommended) npm //选择配置方法

选择后会进行安装，安装后目录会出现

build、config、node_modules、src、static、.babelrc、.editorconfig、.gitignore、.postcssrc.js

他们的作用分别为

build、config webpack相关配置

node_modules 依赖的node相关的模块

src 源代码

.babelrc ES代码相关转化配置

.editorconfig 项目文本相关配置

.gitignore git仓库忽略的文件夹配置

.postcssrc.js css相关转化的配置

ESLint规范

config中的index.js中可以修改useEslint的值

当你的代码不符合ESlint的规范时，它会报错

Runtime-Compiler和Runtime-only的区别

如果在之后的开发中，你依然使用template，就需要选择Runtime-Compiler

如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only

对比一下Runtime-Compiler和Runtime-only的main.js（入口js文件）

//Runtime-Compiler
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

//Runtime-only
new Vue({
  el: '#app',
  render: h => h(App)
})

Runtime-Compiler中：template会被变成ast再变成render在转化为虚拟dom树再转换为真实dom，即template->ast->render->虚拟dom树->真实dom

Runtime-only中：render直接转化为虚拟dom树再转换为真实dom，即render->虚拟dom树->真实dom

显然前者步骤更多，后者性能代码更少

其中render中的h指的其实是js基础篇 **08 更多事件自定义属性操作节点操作实战演练/节点操作/常见节点操作/创建和添加节点/创建和添加节点（方法）中的createElement()**方法，

new Vue({
  el: '#app',
  render: function (createElement) {
    // 1.普通用法: createElement('标签', {标签的属性}, ['文本'])
    return createElement('h2',
      {class: 'box'},
      ['Hello World', createElement('button', ['按钮'])])
  }
})

new Vue({
  el: '#app',
  render: function (createElement) {
    // 2.传入组件对象:
    return createElement(App)
  }
})

vue cil3

执行npm install -g @vue/cli安装脚手架后初始化vue create my-project

会弹出下列选项

? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

选择前两者都是自动配置基础的babel和eslint，后者则是手动配置，选择了后者则会弹出以下选项

>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

上下改变选项，空格改变勾选，选择后回车，就会根据你选择的选项选择对应的配置

Choose Vue version

 Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x (Preview)

Babel

Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files//对应的配置单独生成文件
  In package.json//配置放在package.json

最后会询问你是否将你刚才的选项保存下来

 Save this as a preset for future projects? (y/N)

回车后就开始自动配置vue-cli 3,安装后目录会出现

public、node_modules、src、.browserslistrc、babel.config.js、.gitignore、.postcss.config.js

public 相当于vue cli2 中的static

node_modules 依赖的node相关的模块

src 源代码

.browserslistrc 浏览器相关支持情况

babel.config.js ES语法转换

.gitignore git忽略的文件

.postcss.config.js css相关转换

vue ui

在cmd中任意文件夹的位置输入指令

vue ui

可以打开vue官方的图形化界面来管理你的vuecli3的项目

箭头函数

语法

const 函数名 = (参数列表) => {
	函数块
}

当参数只有一个或者函数块中只有一句语句时可以省去括号

render:h=>h(app)

补充

箭头函数中的this会向外层作用域中一层层找到this的定义