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的定义