vue-cli(一)：脚手架安装&创建vue项目&文件目录分析

安装脚手架 最新版本4.x 向下兼容

• 安装脚手架步骤

vue.cli https://cli.vuejs.org/zh/guide/
全局安装 npm install -g @vue/cli 
创建项目 开个项目目录 vue create xxx
启动项目 npm run serve
下载缓慢配置npm淘宝镜像 npm config set registry https://registry.npm.taobao.org
vue脚手架隐藏了所有webpack相关配置 若想查看 执行 vue inspect > output.js

• 1.配置淘宝镜像 全局安装vuecli
  • npm config set registry registry.npm.taobao.org
  • npm i -g @vue/cli 全局安装vuecli
  • 
  • 
  • 
• 2.创建一个vue.cli项目 并启动
  • vue create xxx
  • 
  • 

脚手架项目文件目录分析

• public文件夹

  1.index.html 页面容器 id #app
  2.favicon.ico 网站页签图标
  

• src文件夹

  1.main.js 项目入口文件
  2.App.vue 所有组件的父组件
  3.components文件夹 放组件文件
  4.assets文件夹 放静态资源
  

• babel.config.js es6->es5 babel转 需要配置 这里就用vue的就好了
  • 
• package.json 是包的说明书

  1.符合npm规范的都会有这个文件
  2.包名字 版本 常用依赖 库 命令
  3.serve 运行项目
  4.build 开发完了执行构建 丢给后端
  5.lint 语法检查
  6.vue-template-compiler 模板解析器
  

• package-lock.json 包版本控制文件
  • 保证能安装到指定版本
  • 
• README.md 项目描述
• render函数分析(main.js里)

关于不同版本的Vue
1.vue.js与vue.runtime.xxx.js的区别
  vue.js是完整版的Vue 包含：核心功能+模板解析器
  vue.runtime.xxx.js是运行版的Vue 只包含：核心功能 没有模板解析器
2.因为vue.runtime.xxx.js没有模板解析器 
  所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容