Vue脚手架Cli

  • 博主： 牛宝宝
  • 发布时间：
  • 395 次浏览
  • 🎨前端
  • Vue

1、cli脚手架是一个工具，自动生成基本目录和相关webpack配置

2、使用前提：node环境（直接执行js环境）,安装了webpack

3、安装

npm install -g cnpm --registry="  //换成淘宝镜像 
cnpm install -g @vue/cli  //安装脚手架3，如果要使用脚手架2，需要拉取一个2的模板 
//拉取2.x
cnpm install -g @vue/cli-init

4、创建

  • 2.x    执行 vue init webpack projectname

  • 3.x    执行 vue create projectname

5、创建的时候一些选项（有些↑↓选择，空格键确定）

  • runtime+compiler和runtime-only区别

  • compiler渲染是把组件中template变成AST抽象语法树然后经过render渲染变成dom再变成UI

  • runtime-only是直接内部吧tempate 通过render函数渲染成dom再变成UI

render：function（element）{
    return "<div>" //返回组件对象
}
//实际上是执行了
createElement('h2',{calss:'box'},\['hello,word'\])

选择runtime-only就不加载template，vue组件export时，已经把template渲染成render函数，只要安装vue-template-compiler即可

6、vue-cli3基于webpack4，说的是0配置，提供vue ui 可视化配置 （可以运行vue ui 就行）

  • 相比于cli2去除static文件夹增加public文件夹，吧index.html文件放入public

7、然后基本项目结构就创建出来了