VueCLi

VueCLi

如果只是简单的几个Vue的demo不需要用上脚手架，但是开发大型项目需要考虑代码目录结构、项目结构和部署、热加载代码单元测试等

概念

• CLi:Command-Line Interface(命令行界面，俗称脚手架)
• 使用vue-cli可以快速搭建vue开发环境及对应的webPack配置

使用前提——依赖node

• 

• 安装好nodejs,Node环境要求8.9更高版本

• npm:Node Package Manager,是一个NodeJs包管理和分发工具，通常会使用NPM来安装一些开发过程中依赖包

• npm install有时候安装东西比较慢，则可以使用淘宝NPM镜像（使用淘宝定制的cnpm命令行工具代替默认的npm）,然后就可以用cnpm install 【name】来进行安装

使用前提——Webpack

• Vuejs官方脚手架使用了webpack模板
• 它在开发过程中提供了一套完整的功能，能够使开发过程更加高效
• Webpack全局安装：npm install webpack -g

VueCLI的使用

• 安装脚手架：npm install -g @vue/cli
• 查看版本：vue --version
• 安装脚手架2：npm install @vue/cli-init
• 脚手架2创建项目：vue init webpack my-project
• Vue CLI3初始化项目：vue creat my-project

项目创建以及目录结构

• 

脚手架2的目录：

• bulid(构造)

 build.js —— 生产环境构建操作
    check-versions.js —— 版本检查（npm，node）
    utils.js —— 相关工具的构建（各种loader）
    vue-loader.conf.js ——  .vue文件 解析 配置 加载
    webpack.base.conf.js —— webpack基础配置
    webpack.dev.conf.js —— webpack开发环境配置
    webpack.prod.conf.js —— webpack生产环境构建配置

• config(配置)

    dev.env.js —— 开发环境变量
    index.js —— 开发环境的配置（设置端口，自动打开浏览器……）
    prod.env.js —— 生产环境变量

• node_modules(模块依赖)
• src(项目路径)

api —— 后台接口文件夹
    common —— 通用资源文件夹（图片，字体，样式……）
    components —— 非路由组件文件夹
    filter —— 自定义过滤器文件夹
    mock —— 模拟数据接口文件夹
    router —— 路由文件夹
    store —— VueX配置文件夹
    pages —— 路由组件文件夹
    App.vue —— 父组件
    main.js —— 项目入口文件

• static(静态资源)：例如全局样式和图片

• 其他：

  • .babelrc:(babel)es6转化es5
  • .editorconfig:编辑器代码风格配置
  • .gitignore:git上传文件时，忽略的文件
  • package.json :管理node里边的包（还可以配置某些npm命令）
  • package-lock.json:与package.json文件相互映射
  • README:写一些文档相关信息

• 

• 

• 

Runtime+Complier和Runtime-only的区别

• 如果在之后的开发中，要使用template就要选择Runtime-Compiler,但是如果使用.vue文件夹开发就要选择Runtime-only

• 选择手动配置需要的话敲空格即可
• 如果自己设置了自己的默认配置，删除可以去vuerc中找到想删除的进行删除
• rc是runcommand即运行命令的简写rc是一些脚本类文件的后缀，这些脚本通常在程序的启动阶段被调用

脚手架4目录

• 

• 此时的public相当于之前的脚手架2的static
• 通过npm run serve 代替之前的脚手架2的npm run dev
• 了解一下render函数，相当于template

脚手架4运行

• cd project-name // 进入项目根目录
• npm run serve // 运行项目

vue ui命令

• 

• https://blog.youkuaiyun.com/weixin_40688217/article/details/88321322可以参考该链接如何创建项目和管理项目