目录
一、CLI快速入门
1. 官方介绍 :
2.安装Vue CLI :
3.搭建Vue CLI :
4.IDEA配置Vue CLI :
二、Vue CLI项目分析
1.结构分析 :
1.1 config
1.2 node_modules
1.3 src
1.4 static
2.流程分析 :
2.1 main.js
2.2 router/index.js
2.3 components/HelloWorld.vue
2.4 App.vue
2.5 index.html
一、CLI快速入门
1. 官方介绍 :
(1) Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:
- 通过
@vue/cli
实现的交互式的项目脚手架。- 通过
@vue/cli
+@vue/cli-service-global
实现的零配置原型开发。- 一个运行时依赖 (
@vue/cli-service
),该依赖:
- 可升级;
- 基于 webpack 构建,并带有合理的默认配置;
- 可以通过项目内的配置文件进行配置;
- 可以通过插件进行扩展。
- 一个丰富的官方插件集合,集成了前端生态中最好的工具。
- 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
(2) Vue CLI 致力于将 Vue 生态中的工具基础标准化,以确保了各种构建工具能够基于智能的默认配置即可平稳衔接,使开发人员能够专注在撰写应用上,而不必纠结配置的问题。与此同时,Vue CLI也为每个工具提供了调整配置的灵活性,无需 eject。
2.安装Vue CLI :
搭建Vue CLI脚手架工程,需要使用到NPM(node package manager),npm是随node.js安装的一款包管理工具,类似于Maven。由于up以Vue2为演示版本,因此此处以低版本node.js 10.16.3为例,下载地址如下 :
https://nodejs.org/en/blog/release/v10.16.3
如下图所示 :
下载后安装即可(安装目录可手动指定)。
(1) 在本地cmd窗口中,先通过"npm uninstall vue-cli -g"命令卸载掉旧版本CLI(若无旧版本无需输入该命令);
(2) 再通过"npm install -g cnpm --registry=https://registry.npm.taobao.org"安装淘宝镜像,安装完成后如下图所示 :
(3) 还需要通过"cnpm install webpack@4.41.2 -g"命令和"cnpm install webpack-cli@4.9.2 -g"安装webpack和webpack-cli工具。
(4) 最后使用"cnpm install -g @vue/cli@4.0.3"命令安装vue cli;可以通过"vue -V"来查看安装的vue cli的版本,如下图所示 :
PS : 使用cnpm时,若报错"Error: Cannot find module 'node:util' ",可能是因为npm版本和cnpm版本不匹配导致的,可以先通过"npm uninstall cnpm"卸载掉之前安装的cnpm;然后通过"npm -v"查看当前npm的版本,如下图所示 :
通过"npm install -g cnpm@6.0.0 --registry=https://registry.npm.taobao.org"指令,根据npm的版本指定安装对应版本的cnpm。
3.搭建Vue CLI :
首先,确定Vue项目所在的位置,可自行建立,如下图所示 :
然后在该文件下进入cmd,通过"vue init webpack 项目名称"来初始化项目,在后续跳出的配置提示中,选择如下选项 :
接着,根据提示输入指令即可,如下图所示 :
运行成功后可以通过8080端口访问到以下页面 :
4.IDEA配置Vue CLI :
通过Ctrl + c终止cmd中运行的Vue项目,用IDEA打开刚刚创建好的Vue项目,然后配置npm,如下图所示 :
配置完成后,apply;运行项目即可重新访问方才的页面。
二、Vue CLI项目分析
1.结构分析 :
Vue项目的结构大体上可以分为四大块,如下图所示 :
1.1 config
config目录用于存放配置文件,例如index.js中可以进行端口的配置。
1.2 node_modules
node_modules目录表示该项目依赖的模块(主要是一些.js文件),这些依赖的模块在static目录下的package.json中指定。
1.3 src
src下面又分为了"assets","components","router"等几个小目录——
(1) assets : 用于存放项目资源的目录,eg : .css文件,.js文件,图片等。
(2) components : 存放自定义的组件。
(3) router : 存放路由文件,也称为"路由器/路由表"。
PS : ①直接位于src目录下的App.vue文件是Vue项目的主体单页,可以显示路由的视图。②直接位于src目录下的main.js是Vue项目的核心文件,是入口js文件,Vue项目在这里创建Vue实例,并且指定挂载el,router,component,template等。
1.4 static
存放静态文件。static目录下有两个尤其重要的文件---index.html和package.json。
index.html : Vue项目首页,这里定义了一个id = app的div。package.json : 指定当前Vue项目依赖的模块,类似于Maven项目中的pom.xml配置文件。
2.流程分析 :
2.1 main.js
javascript>javascript">// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
(1) main.js是Vue项目的入口js,Vue实例在此被创建。
(2) 在Vue实例中指定了挂载el(id = app的div元素)。
(3) 在Vue实例中指定的router从router目录下导入,此处是"./router/index.js"的简写,导入与导出方式即“ES6新特性——模块化编程”中的第三种导出方式export default {};和第二种导入方式import 名称 from "__.js"; 。(4) 在Vue实例中指定了components引入组件,此时使用了“ES6新特性——对象简写”的语法。
(5) 在Vue实例中指定了template:<App/>,此处的App即来自components:{ App }中的App。因此,当我们自行更改属性名称时,Vue项目仍可正常运行,如下图所示 :
2.2 router/index.js
javascript>javascript">import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' //@表示src目录 Vue.use(Router) export default new Router({ routes: [ { path: '/', //每个path对应一个路由表项。 name: 'HelloWorld', component: HelloWorld } ] })
(1) main.js进行路由,找到路由文件"router/index.js",同时得到浏览器中访问的URL,即http://localhost:8080/#/,得到路由path/(回顾——URL结尾带 / 表示访问的是一个路径,URL结尾不带 / 表示访问的是一个资源)。
(2) 在router/index.js文件中通过模块化编程的导出语句导出了一个Router对象。
(3) routes: [ ] 表示路由表,可以指定多个路由 (即多个可匹配的访问路径)。
(4) 此处经过path"/"的匹配,对应找到了"component: HelloWorld.vue"组件。
2.3 components/HelloWorld.vue
(1) 自定义组件,可以显示页面。
(2) 编译组件后得到视图。
(3) 将编译后得到的视图/页面进行返回。
2.4 App.vue
(1) App.vue是Vue项目主体单页。
(2) 引入<router-view/>之后可以显示路由后的视图/页面。
2.5 index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue_first_try</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
(1) static目录下的index.html是项目首页。
(2) index.html中定义了一个id = app的div元素。
(3) 当创建好的Vue实例渲染完毕后,就会挂载到该div上,最后用户就看到了渲染后的效果。(4) 总结 : Vue CLI脚手架项目最后的访问顺序是——
①main.js(入口js) -->
②router/index.js(根据访问的URL匹配相应的的路由) -->
③components/HelloWorld.vue(根据匹配到的路由项中的component属性找到对应的组件) -->
④main.js(编译组件生成视图,并将视图返回给main.js) -->
⑤根据main.js中创建的Vue实例中的components属性,访问引入的App组件 -->
⑥App.vue组件中又引入了<router-view/>以显示路由后的视图/页面 -->
⑦最后将渲染好的Vue实例挂载到index.html中定义的id=app的div元素上。
System.out.println("END------------------------------------------------------------");