1Vue CLI

1.1关于Vue CLI

Vue CLI是Vue官方推出的一个脚手架客户端工具，使用它可以快速的构建一个基于Vue的单页面应用。

1.2安装Node.js

下载 https://mirrors.tuna.tsinghua.edu.cn/nodejs-release/v16.14.2/node-v16.14.2-x64.msi 并安装，安装过程中没有特殊选项。

安装完成后，可以在命令提示符窗口或终端中执行npm -v检查是否安装成功：

npm -v

安装Node.js的主要目的就是为了使用npm。

npm = Node Package Manager

在使用npm之前，需要先将npm源配置为国内的某个npm源服务器：

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

设置后，还可以通过get命令查看npm源：

npm config get registry

注意：以上命令并不能检查你的配置值是否正确！

1.3安装Vue CLI

需要安装Vue CLI以后，才可以通过它的命令来创建Vue CLI项目、启动项目等。

当安装了npm并配置npm源之后，安装Vue CLI的命令是：

npm install -g @vue/cli

安装过程中没有出现Error字样即为成功。

安装过程中出现Error字样即为失败，可以：

先通过npm config get registry检查npm源是否是：https://registry.npm.taobao.org/
重新执行以上安装Vue CLI命令
不要在Power Shell下执行命令（命令提示符前面为PS字样）
如果使用Mac OS（苹果操作系统），建议在命令前添加sudo以使用管理员权限来执行命令

如果安装过程中卡住长时间没有反应，可以按下Ctrl + C强制终止，然后再次执行命令进行尝试。

当安装完成之后，可以使用vue -V来查看Vue CLI版本，也可以用于检验刚才的安装是否成功：

vue -V

1.4创建Vue CLI项目

通常，应该创建某个文件夹，用于存放项目，例如在D盘下创建Vue-Workspace文件夹，然后，在命令提示符窗口中进入此文件夹：

D:cd D:\Vue-Workspace

接下，通过vue create 项目名称命令来创建Vue CLI项目：

vue create jsd2204-csmall-web-client-teacher

注意：敲完以后命令之后只能按1下回车键，即使卡住了，也不要反复按回车！

注意：如果接下来的操作过程中选错，按下Ctrl + C强制终止，再重新创建项目。

按1下回车后，稍微等待一会，会出现创建项目时的选项，需要选择：

Manually select features

Babel
Vuex
Router

2.x

直接回车

In package.json

直接回车

最后，看到Successfully created project jsd2204-csmall-web-client-teacher字样，即表示创建成功。

1.5启动项目

通过IntelliJ IDEA打开项目，在IntelliJ IDEA的Terminal窗口中执行：

npm run serve

执行以上命令即可启动项目，启动成功后，即可看提示：

App running at:- Local:   http://localhost:8080/

提示：可能某些电脑上会显示多个网址，这并不重要。

打开浏览器，通过 http://localhost:8080/ 网址进行访问，即可看到默认的页面。

关于占用端口：通过npm run serve启动的Vue CLI会默认尝试占用8080端口，如果尝试占用的端口号已经被其它进程占用，则会自动顺延一位，即尝试占用8081端口，如果仍被占用，会继续顺延……

也可以显式的指定某个端口号，在package.json中修改scripts的serve属性，例如配置为：

"serve": "vue-cli-service serve --port 8888"

则当前项目启动时会占用8888端口。

1.6停止服务

当项目启动后，在提示了启动成功的端口窗口中，按下Ctrl + C即可停止服务。

提示：有时按下Ctrl + C后没有响应，可能反复多按几次，或按了Ctrl + C后回车。

提示：其实，只要按下了Ctrl + C，当前服务就已经停止了，后续可能出现终止批处理操作吗(Y/N)?提示，无论选择Y还是N，都无所谓。

1.7重启服务

没有此功能

1.8Vue CLI项目结构

package.json：相当于Maven项目中的pom.xml文件，主要配置了当前项目的依赖项，如果不太熟悉此文件，不建议手动修改
package-lock.json：此文件是自动生成的，不建议手动修改
[node_modules]：当前项目中各依赖项对应的源文件，通常，此文件夹的内容较多，且共享项目时，通常不会包含此文件夹，例如GIT仓库中的项目文件通常不包含此文件夹的内容，执行npm install命令将根据package.json下载相关的依赖项到此文件夹中
[src/views]：是建议的存放.vue视图文件的文件夹
[src/router/index.js]：是项目的路由配置文件，它配置了各路径与.vue视图组件的对应关系
public/index.html：项目中唯一的HTML文件，其内部在页面设计中添加了<div id="app"></div>标签
src/App.vue：项目中默认的视图文件，是被index.html显示的

1.9关于.vue视图文件

是Vue CLI中用于设计页面的源文件，可以此文件中设计页面的元素、CSS样式、JavaScript。

此文件可以有3个根节点（元素）：

<template>：在其内部设计页面元素，且此节点（元素）必须有且仅有1个直接子节点（元素），通常，会在<template>下添加<div>，然后，在<div>内部再设计页面
<style>：在其内部配置CSS样式
<script>：在其内部编写JavaScript程序

提示：根据页面设计，某些.vue文件可能没有<style>，或可能没有<script>。

1.10关于路由配置

在src/router/index.js中，使用了routes数组常量配置路由，主要是配置了各路径与视图组件的对应关系，所以，在数组中的各个元素值就是一个个的路由对象，每个路由对象至少要配置path和component这2个属性。

提示：在路由对象中，name属性不是必须的。

关于component属性，有2种配置方式，第1种是默认导入的，通常会在当前文件的顶部使用import语句导入并命名，然后，此component属性的值就是导入时取的名字，第2种是使用箭头函数import导入的，通常，在各项目中，只会有1个是默认导入的。

1.11关于router-view

在.vue文件中，可以添加<router-view/>，此标签本身是没有显示效果的，它表示“此处将由另一个视图组件来完成显示，且，到底由哪个视图组件来显示，取决于路由配置与当前访问的URL”。

1.12嵌套路由

在开发实践中，必然存在某些页面是完全没有相同之处的，所以，通常，在App.vue的设计中，只保留一个<router-view/>，所以，具体的显示都由各个.vue文件来决定，默认并没有共同（复用）的部分！但是，也一定存在多个页面之间存在共同的部分，所以，在某个.vue中可能还需要再加一个<router-view/>，像这种本身显示在App.vue中的<router-view/>位置、自身内部也包含<router-view/>的，称之为“嵌套路由”。

在src/router/index.js中，如果某个视图有<router-view/>，在配置时，应该通过children属性配置子级路由（被嵌套的那层路由），此children属性的写法与根级的routes完全相同，例如：

const routes = [{path: '/home',component: () => import('../views/HomeView.vue'),children: [{path: '/brand-list',component: () => import('../views/BrandListView.vue')},{path: '/brand-add-new',component: () => import('../views/BrandAddNewView.vue')}]},// 省略其它代码}

1.13在Vue CLI中使用Element UI

在终端中，需要先安装Element UI（本质上是下载Element UI相关的文件到本项目的node_modules中）。

必须保证当前命令提示符是当前项目下（与执行npm run serve等命令的位置相同，必须保证当前位置下有package.json文件）！

安装的命令是：

npm i element-ui -S

注意：以上命令最后的S是大写的！

安装完成后，需要在src/main.js中进行配置：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

JSD-2204-VueCLI-Day01相关推荐

vue-cli webpack配置分析 - chenBright - SegmentFault 思否
相信vue使用者对vue-cli都不会陌生,甚至可以说,很熟悉了,但对其webpack的配置可能知之甚少吧. 过完年回来后,我接手了公司的新项目.新项目是一个spa.很自然,我就想到了vue-cli脚 ...
【SSM+ElementUI】综合练习-Axios Mock EasyMock nodejs npm webpack vuecli restful 请求
SSM+ElementUI综合练习-day01 一.课程介绍前后端分离开发(概念熟悉) 搭建前端环境-nodejs&npm&vue&webpack&vuecli(了解 ...
用vue-cli脚手架搭建一个仿网易云音乐的全家桶vue项目
一,vue-cli环境搭建 1,全局安装webpack npm install webpack -g 2,安装vue脚手架 npm install vue-cli -g 3,新建一个新的project ...
Java - 框架之 SpringBoot 攻略day01
Spring-Boot 攻略 day01 spring-boot 一. 基本配置加运行 1. 导入配置文件(pom.xml 文件中) <parent> <groupId>org ...
vuecli 编译后部署_基于vue-cli 打包时抽离项目相关配置文件详解
前言:当使用vue-cli进行开发时时常需要动态配置一些设置,比如接口的请求地址(axios.defaults.baseURL),这些设置可能需要在项目编译后再进行设置的,所以在vue-cli里我们需 ...
vue-cli脚手架(框架)
一.创建vue项目 npm install vue-cli -g #-g全局 (sudo)npm install vue-cli -g #mac笔记本vue-init webpack myvue #项 ...
Vue2.0使用vue-cli脚手架搭建
一:安装node.js Node.js官网:https://nodejs.org/en/download/ 选择相应的版本即可安装通过node自带的npm包管理工具二.安装依赖安装依赖:npm ...
vue-cli脚手架
安装全局环境安装,不必要在项目地址下安装:npm install -g vue-cli 卸载全局卸载:npm uninstall -g vue-cli 查看是否安装成功:vue list 查看vu ...
Vue之Element-ui和Vue-cli的使用
Element-ui 单文件组件就像是一个个封装好的页面样板,我们可一把这些样板组合在一起形成一个完整的页面.就像QQ空间装扮一样,将个个样板放入QQ空间页面中组成自己风格的页面.而Element-u ...
从零开始搭建一个vue项目 -- vue-cli/cooking-cli（一）
从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一) 1.vue-cli搭建一个可靠成熟的项目 1.介绍 vue-cli 我是去年六月份接触的vue1.0,当时还是个菜逼,当 ...

JSD-2204-VueCLI-Day01