vue-cli

vue.js 开发的标准工具，简化基于 webpack 工程化的项目搭建

安装

1
npm install -g @vue/cli

npm 全局安装 vue-cl

创建 vue 项目

1
vue create projectName

projectName 是项目名称

vue-cli1

选择最后一项：自定义配置

vue-cli2
通过 space键选择需要安装的功能
按 enter键进行确认安装

vue-cli3

选择 vue 版本

vue-cli4

选择自己需要的样式文件加载器

vue-cli5

第一个选项：各自的配置信息都放在各自的配置文件中
第二个选项：将配置信息都放在 package.json 文件中

vue-cli6

是否将刚才选择的配置创建预设

vue-cli 会自动将项目文件夹初始化 git 仓库

项目结构

vue-cli项目目录结构

  • node_modules 文件夹是存放依赖文件和插件文件
  • public 文件夹是用来存放 index.html 和 网页图标
  • src 文件夹是主要使用的文件夹
    • assets 文件夹存放静态资源文件，如 css 文件、图片
    • components 文件夹存放程序员创建的组件文件
    • router 文件夹存放路由相关文件
    • store 文件存放 vuex 相关文件
    • views 文件夹存放网页页面文件
    • App.vue： 项目根组件
    • main.js： 项目入口文件 ，项目运行需要先执行 main.js 文件
  • .gitignore： git 忽略文件
  • babel.config.js： babel 的配置文件
  • package.json： 依赖和插件的包文件

vue 项目运行流程

通过 main.js 把 App.vue 渲染到 index.html 指定区域中

拓展

main.js 中 vue实例的 $mount() 方法与 el 属性作用相同