11. VUE 脚手架--文件结构、vue安装

VUE 脚手架

一、文件结构：

① 创建一个唯一完整的HTML页面：
脚手架将唯一完整的HTML页面一分为三，运行时再组合起来。

(1) 把唯一的页面html放入public中，head中引入第三方css和js

• public文件： 用来放第三方的压缩版和第三方JS的压缩版
• 把<div id="app"></div>和<script> new Vue({ el: "#app" }); /script>划分出去。
  <div id="app"></div> ⇒ src/App.vue 其中内容包含template和style。

1. template只包含公共页头组件和<router-view>。
2. style中包含所有页面用到的公开css样式

• <script> new Vue({ el: "#app" }); </script> ⇒ src/main.js

(2) 为每个页面创建页面组件

脚手架规定所有“页面”组件文件都要放在src/view文件夹中，且扩展名为.vue

• 每个vue文件中： （html+css+js）
  ① <template></template> 中间为整个页面的html内容
  ② <script>export default{ .....各组件对象的js内容...... }</script>
  ③ <style>包含这个页面才用到的css ; <style lang="scss">可以用scss</style>

(3) 路由对象和路由字典

src/router/index.js，包含路由字典数组routes和路由对象router

(4) 全局组件和其他子组件都放在src/components文件下

(5) 运行

路由router对象监视浏览器地址栏路径变化，并查找对应页面组件内容。先替换App.vue中的<router-view>,然后main.js，再将包含要加载内容App.vue组件内容，替换到唯一完整index.html中空<div id="app"></div>位置

二、安装脚手架

(1) 安装可以反复生成脚手架的工具

① 设置淘宝镜像 – 下载快

npm config set registry https://registry.npm.taobao.org

② 安装可生成脚手架代码的命令行工具

npm i -g @vue/cli

cnpm i -g @vue/cli

以上： 当看到 +@vue/cli@版本号 说明安装成功

③ 验证 vue/cli 安装成功

(2) 创建项目

// cmd窗口
vue create 自定义项目名

(3) vue项目安装步骤

出现 Successfully created project 项目 … //⇒ 标识项目安装成功

(4) 运行文件

集成终端打开：

npm run serve

cnpm run serve

三、脚手架自带打包工具

① 将main.js及其引入的所有文件打包（编译/压缩）为一个巨大的app.js文件
② 打包工具webpack自动将app.js文件添加到唯一完整的html页面头部引用。

<script src="app.js">
// app.js包含new Vue 和 APP.vue中所有的内容

小tips：

① npm切换/查看镜像

npm install -g nrm
nrm ls : //⇒ 查看所有镜像地址
nrm use taobao //⇒ 切换为taobao镜像，以后都会从taobao下载

② 另一种默认为国内境内的淘宝镜像

npm config set registry https://registry.npm.taobao.org
npm config get registry //⇒ 查看是否设置成功

③ 备选方案：如果以上出错

npm i -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v //⇒ 版本号；成功

④ 清空node.js缓存：

npm clean -f