六、脚手架Vue CLI基础

脚手架Vue CLI基础

一、前提先安装node、npm，镜像配置

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

cnpm install [name]

二、安装脚手架(例子用的3.2.1版本)

npm install -g @vue/cli

• 为了可以使用脚手架3和脚手架2的功能，需要拉一个架手架2的模板

npm install @vue/cli-init -g

三、初始化项目

1. 脚手架2

vue init webpack my-project (文件夹名字)

项目创建过程：

• project name
• project description 项目描述
• Author 作者，默认读取git的全局配置信息
• Runtime + Compiler: recommendec for most users 选择是使用runtime complier还是runtime-only
• vue-router 是否安装vue路由
• Use ESLint to lint your code 对js代码进行限制，规范代码书写规范，不规范会报错，如果选择yes时，接着会选择具体执行的规范
• Set up unit tests 是否使用单元测试
• Setup e2e tests with Nightwatch? 端到端测试
• Should we run npm install for you after the project has been created？ 使用npm还是Yarn管理项目

2. 脚手架3

vue creat my-project

四、目录结构

五、runtimeCompiler和runtime-only的区别

1. runtime-compiler展现过程

   template->ast->render->vdom->UI

2. runtime-only展现过程

   render-vdom-UI

3. 结论：

   • runtime-only 性能更高
   • runtime-only 代码更少

4. render函数

   new Vue{
   	el: '#app',
   	render: function (creatElement){
           //createElement格式：('标签',{标签的属性},[标签的内容])
           crreateElement('h2',{class: 'box'}, ['hello world'])
   	}
   }
   

六、VueCLI3创建过程和目录

1. 创建项目 vue create 项目名

2. 配置

   1. please pick a preset //选择配置

      1. default
      2. Manually //手动选择配置

   2. where do yb prefer placing config for ? //需要为你的配置建立独立的配置文件吗

   3. save this as a preset for future projects? //要为这个配置保存一个配置吗

3. 目录结构

4. 配置
   1. vue ui,图形化配置
   2. node_modules -> vue-> …
   3. 在项目文件创建vue.config.js文件

module.exports = {

}