安装

本节目标：理解“安装”的核心思路，并能把它用于实际开发或面试表达。 一、使用**<script>**引入 用 ==<script>== 标签引入，==Vue== 会被注册为一个全局变量。 引入的资源可以是：

本地资源；

•   互联网资源，如==CDN==：

  **开发环境：**==<script src====="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"====></script>==

  生产环境：==推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：====<script src====="https://cdn.jsdelivr.net/npm/vue@2.6.11"====></script==

**原生****ESModules****引入：**

==<script type====="module"====>======  ==import== ==Vue== ==from== =='====https://cdn.jsdelivr.net/npm/vue2.6.11/dist/vue.esm.browser.js===='========</script>==

二、使用包管理器 安装到本地计算机：构建大型应用时推荐使用NPM安装，原因：

配合使用模块打包器：NPM能很好地和诸如webpack或Browserify等打包器配合使用。

Vue也提供了许多配套工具来辅助开发单文件组件。

安装方式：如安装最新稳定版
$ npm install vue

三、脚手架的使用 脚手架vue-cli：快速构建前端项目的一个工具或平台。主要完成的工作：

创建文件目录

安装必要的依赖

•   提供常见工具：

  babel转译

  代码检验

  热重载

  内置webpack

为开发提供服务

**全局安装：**
npm install -g @vue/cli# ORyarn global add @vue/cli

**创建项目：**
vue create my-project# ORvue ui

执行完上述命令后，会出现一系列的选择项，可根据需要进行选择； 最后脚手架生成的目录结构如下： ==├──== ==node_modules== ==#== ==项目依赖包目录========├──== ==public========│== ==├──== ==favicon.ico== ==# ico====图标========│== ==└──== ==index.html== ==#== ==首页模板========├──== ==src== ======│== ==├──== ==assets== ==#== ==样式图片目录========│== ==├──== ==components== ==#== ==组件目录========│== ==├──== ==views== ==#== ==页面目录========│== ==├──== ==App.vue== ==#== ==父组件========│== ==├──== ==main.js== ==#== ==入口文件========│== ==├──== ==router.js== ==#== ==路由配置文件========│== ==└──== ==store.js== ==# vuex====状态管理文件========├──== ==.gitignore== ==# git====忽略文件========├──== ==.postcssrc.js== ==# postcss====配置文件========├──== ==babel.config.js== ==# babel====配置文件========├──== ==package.json== ==#== ==包管理文件========└──== ==yarn.lock== ==# yarn====依赖信息文件== ==根据你安装时选择的依赖不同，最后生成的目录结构也会有所差异。== 启动# ==打开项目目录========cd vue-project====== # ==启动项目========yarn serve====== # ==or========npm run serve==