Vue脚手架First

1. Vue脚手架

Vue脚手架是一个开发基于Vue框架的前端项目的软件。

Vue脚手架的项目是“单页面”的，也就是在这样的项目，只有1个HTML页面，它认为页面是由多个模块组成的，各个模块都是可以随时替换的，从而显示出不同的页面效果。

2. 关于Node.js

首先,需要安装Node.js软件，下载得到安装后直接安装即可，安装过程中没有需要特别关注的部分。
安装完成后，可以通过npm -v命令查看安装的npm软件的版本，顺便检查是否安装成功。

npm -v

以上安装Node.js主要是为了使用npm(Node Package Management)，通常，应该修改“npm源”，以使得其下载软件将从配置的站点进行下载：

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

执行以上命令默认没有任何反馈，可以通过以下命令查看配置的值：

npm config get registry

3. 安装Vue CLI

Vue脚手架软件称之为：Vue CLI

通过npm命令可以安装此软件：

npm install -g @vue/cli

以上安装过程可能会提示WARN字样，可以无视，只要以上命令可以正常执行结束，并没有任何ERR字样的提示，即为成功！

安装Vue CLI主要是为了创建项目并管理项目(例如启动项目)。

4. 创建项目

首先，准备用于存放Vue脚手架项目的文件夹（任何你找得到的地方，不推荐操作系统的敏感文件夹），并且，在命令提示符窗口（或者终端窗口）中进入此文件夹。

然后，通过vue命令（来自前一步安装的@vue/cli）来创建项目，命令的基本格式是vue create 项目名称，例如：

vue create jsd2205-web-client-teacher
注意：执行创建项目的命令后，可能会有一点卡顿，此时不可以反复按回车键！

注意：如果创建项目的过程中选择错误，可以通过按下CTRL + C终止，并重新创建！

在创建选项中，需要选择”

Manually select features：手动选择功能
Babel / Vuex / Router
2.x
Y
In package.json
N

接下来，会自动完成项目的创建，在创建结束后，如果信息中没有错误，且出现了Successfully created project 项目名称.的字样，则创建成功！

如果创建项目失败，应该先删除已经创建的项目的文件夹，然后检查npm源，确认无误后，再次执行vue create 项目名称命令来重新创建项目。

5. 启动项目

当项目创建成功后，可以通过IntelliJ IDEA打开此项目。

在IntelliJ IDEA中，打开Terminal窗口，默认的提示符的位置应该就是当前项目的文件夹，在此处执行命令即可启动项目：

npm run serve

当启动成功后，可以看到Compiled successfully in 7859ms字样。

提示：启动成功后，会提示访问此项目的URL，例如：http://localhost:8080，根据当前计算机的网络配置不同，接下来的其它URL提示可能不同，均可无视。

在浏览器中，可以通过http://localhost:8080来访问此项目。

6. 关于视图文件
   在Vue CLI项目中，默认的视图文件（页面文件）在src/views文件夹中。默认的项目中，负责显示的是：

src/App.vue
src/views/AboutView.vue
src/views/HomeView.vue
src/components/HelloWorld.vue

每个视图文件都是以.vue作为扩展名的，每个文件都可以有3个根标签：

<template>：用于设计页面，例如页面中有哪些标签、显示什么内容等，注意：此标签的直接子级标签必须有且仅有1个！
<style>：【可选】用于设计样式，此标签下的都是CSS代码
<script>：【可选】用于编写JavaScript代码

7. 关于路由

Vue CLI的“路由”是一种配置了“访问路径”与“视图组件”的对应关系的对象！

路由是通过src/router/index.js文件的routes常量进行配置的，默认的代码是：

const routes = [
  {
    path: '/about',
    name: 'home',
    component: HomeView
  },
  {
    path: '/',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AdminIndexView.vue')
  }
]

以上routes常量的类型是数组，数组的元素是一个个的对象，以上代码中各对象配置了：

path：访问路径
name：名称，并不是必须的
component：视图组件，配置此属性时，视图组件有2种加载模式，分别是“预加载”和“懒加载”，其中，预加载需要通过当前文件顶部的import语句导入视图，而懒加载则是直接配置此属性时，直接使用箭头函数加上import函数进行配置即可，通常，在每个项目中，应该有且仅有1个视图是预加载的
【练习】在项目中添加“登录”页面（不需要具体的设计页面内容）

操作步骤：

创建新的视图文件
在src/views下创建LoginView.vue，并随意设计页面内容
配置此视图的路由
在src/router/index.js中的routes数组常量中添加新的数组元素，配置path值为/login，配置component值为() => import(‘…/views/LoginView.vue’)
提示：完成此步骤后，就已经可以通过 http://localhost:8080/login 访问到新添加的登录页面
在App.vue中添加新的链接（从功能上来说，并不是必须的）
参考原有代码进行添加即可

8. 关于

在设计视图时，使用<router-view>则表示：当前视图文件（例如默认的App.vue）不处理此部分的显示，将根据访问路径来决定由哪个视图进行显示（取决于src/router/index.js中routes常量的配置）！

9. 关于Vue CLI项目的目录结构
   [node_modules]：当前项目的依赖项（各依赖的框架、工具包对应的文件，类似于Maven所需的本地仓库），注意：通常，从GIT等位置获取的项目，将没有此文件夹及相关文件，则项目不可以直接运行！需要先执行npm install以安装当前项目必须的软件，才可以执行npm run serve来启动项目！
   [public]：静态资源文件夹，通常用于存放图片、.css、.js等文件
   favicon.ico：网站的图标文件，必须在此位置，必须是此文件名
   index.html：是VUE Cli项目中唯一的HTML文件，通常，不建议修改
   [src]：源文件的文件夹，此文件夹下的内容将会被编译后再用于执行
   [assets]：资源文件夹，只能存放不会因为程序而发生变化的资源文件（例如：某张图片会因为js代码而改变显示状态，则此图片不可以放在此文件夹中）
   [components]：存放可能共用的视图组件的文件夹，此处的视图组件可以理解是被封装后的视图部分，可以被其它的视图组件引用
   [router]：存放路由配置文件的文件夹
   index.js：默认的路由配置文件
   [store]：存放共享变量的文件夹
   index.js：默认的存放共享变量的文件夹
   [views]：存放视图组件（.vue文件）的文件夹
   App.vue：项目的入口视图，默认是绑定到了index.html中的
   main.js：项目的主配置文件
   package.json：当前项目的配置文件，在此文件中，典型的配置包含：项目中的依赖项，例如，当执行npm install时，将根据此文件中的配置来决定下载哪些软件
   package-lock.json：是锁定的配置文件，通常，不建议手动维护此文件

10. 关于启动、停止、重启项目

在项目文件夹下，通过npm run serve即可启动项目：

npm run serve

如果项目已经启动，当需要停止时，在启动项目的终端窗口中按下CTRL + C即可停止项目！

提示：当按下CTRL + C后，将提示“终止批处理操作吗(Y/N)?”，其实，此处无论选择Y或N，效果都是一样的！在按下CTRL + C的那一刻，项目就已经停止运行了！

此项目没有直接“重启”的操作，只能停止后再次运行！

11. 在Vue CLI中安装Element UI

首先，在终端窗口中，在当前项目的文件夹下，执行安装命令：

npm i element-ui -S

经过以上操作后，会下载element ui相关的文件到本项目的node_modules文件夹中！

注意：如果你此前已经从GIT拉取了老师的项目，并执行过npm install，再次拉取添加了element ui的项目后，需要再次执行npm install，否则，老师的项目将缺少element ui相关的文件，将不可以正常启动！

接下来，需要在项目的主配置文件（src/main.js）中添加配置：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);