创建`Vue-CLI`项目

1. 什么是Vue-CLI(Command Line Interface)

Vue-cli是Vue官方提供的脚手架工具，默认已经搭建好了一套利用webpack管理vue的项目结构

• node_modules文件夹：存储了依赖的相关的包

• public文件夹：任何位置在public文件夹的静态资源都会被简单的复制，而不经过webpack.你需要通过绝对路径来指引它们，一般用于存储一些永远不会改变的静态资源或者webpack不支持的第三方库

• src文件夹：代码文件夹

  |---- assets文件夹:存储项目中自己的一些静态文件(图片/字体等)

  |---- components文件夹:存储项目中的自定义组件(小组件，公共组件)

  |---- views文件夹:存储项目中的自定义组件(大组件，页面级组件，路由级别组件)

  |---- router文件夹:存储VueRouter相关文件

  |---- store文件夹:存储Vuex相关文件

  |---- App.vue:根组件 （Vue控制的区域）

  |---- main.js入口文件

vue init webpack projectName

当你在项目内部运行 vue-cli-service 命令时，它会自动解析并加载 package.json 中列出的所有 CLI 插件。

如需升级全局的Vue CLI包，请运行：

npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli

项目依赖

上面列出来的命令是用于升级全局的Vue-CLI。如需升级项目中的 Vue-CLI 相关模块（以 @vue/cli-plugin- 或 vue-cli-plugin- 开头），请在项目目录下运行 vue upgrade：

用法： upgrade [options] [plugin-name]

（试用）升级 Vue CLI 服务及插件

选项：
  -t, --to <version>    升级 <plugin-name> 到指定的版本
  -f, --from <version>  跳过本地版本检测，默认插件是从此处指定的版本升级上来
  -r, --registry <url>  使用指定的 registry 地址安装依赖
  --all                 升级所有的插件
  --next                检查插件新版本时，包括 alpha/beta/rc 版本在内
  -h, --help            输出帮助内容

vue的模板template下只能有一个最外层的包裹元素

全局样式与局部样式：对单个.vue文件，<style scoped>是局部样式。<style>是全局样式

2. 如何配置Vue-CLI创建项目的webpack配置

默认情况下通过Vue-CLI创建的项目已经自动给我们配置好了webpack.但是有时候默认的配置可能不能满足我们的需求，例如我们想修改输出目录的名称。但是Vue-CLI创建的项目里又没有webpack配置文件，我们应该如何修改或增加webpack配置？

• 可以通过新建vue.config.js的方式来修改配置
• 可以通过在vue.config.js中的configureWebpack属性类新增webpack配置