VUE学习笔记--Vue-cli

 Vue 脚手架能自动生成 vue 和 webpack 的项目模板。 
      Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

通过 @vue/cli 实现的交互式的项目脚手架。  
通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。 
一个运行时依赖 (@vue/cli-service)，该依赖：

可升级。 
基于 webpack 构建，并带有合理的默认配置。  
可以通过项目内的配置文件进行配置。  
可以通过插件进行扩展。

一个丰富的官方插件集合，集成了前端生态中最好的工具 
一套完全图形化的创建和管理 Vue.js 项目的用户界面。

利用vue-cli脚手架来构建Vue项目需要先安装Node.js和NPM环境。

    Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与 PHP、 Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。 发布于 2009 年 5 月，由 Ryan Dahl 开发，实质是对 Chrome V8 引擎进行了封装。

     Node是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node 使用事件驱动， 非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

Node.js 的安装比较简单，大家需要在 node.js 官网(https://nodejs.org/en/download/)下载并安装 node.js 环境，windows 的推荐下载 Windows Installer (.msi)。同时，大家会得到一个附 送的 NPM 工具。

 

 

       NPM最初用于管理和分发Node.js的依赖，它自动化的机制使得层层嵌套的依赖管理变得十分简单，因此后来被广泛应用于前端依赖的管理中。
       NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
允许用户从 NPM 服务器下载别人编写的第三方包到本地使用。
允许用户从 NPM 服务器下载并安装别人编写的命令行程序到本地使用。  
允许用户将自己编写的包或命令行程序上传到 NPM 服务器供别人使用。

 由于 node.js 已经集成了 npm，所以之前 npm 也一并安装好了。所以在 cmd 终端输入 npm -v 来测试是否安装成功。出现版本提示表示安装成功。

    利用Vue提供的Vue-cli 脚手架快速建立项目，步骤如下：
搭建第一个完整的 Vue-cli 脚手架构建的项目。
打开命令行终端，输入npm install -g vue-cli命令  如图所示：

安装完成，输入 Vue -V，如果出现相应的版本号，则说明安装成功。如图 所示。

我们可以使用 vue-cli 来快速生成一个基于 webpack 模板构建的项目，如图 所示，项目名为 vue-project

注意：首先需要在命令行中进入到项目目录，然后输入如下命令

然后进入项目目录（如：cd  vue-project），使用 npm install安装依赖，如图所示。

 

 

new Vue({ 
    el: '#app'， 
/*将 router 设置到 vue 对象中*/ 
    router， 
/*声明一个组件 App，App 这个组件在一开始已经导入到项目中了，但是无法直接使用，必须声明 */
    components: { App }， 
/*template 中定义了页面模板，即在 App 组件中的内容渲染到'#app'这个 div 中*/ 
    template: '<App/>' 
})

App.vue 是一个 vue 组件，包含三部分内容：页面模板 、页面脚本 、页面样式，如下：

<!--页面模板--> 
<template> 
      <div id="app"> 
          <!--页面模板中定义了一个图片--> 
<img src="./assets/logo.png"> 
<!--router-view 简单理解为路由占位符，用来挂载所有的路由组件--> 
     <router-view/> 
</div> 
</template> 
<!--页面脚本：页面脚本是用来实现数据初始化、事件处理等等--> 
<script> 
export default { 
   name: 'App' 
}
</script> 
<style> </style><!--页面样式--> 

index.js 文件解释：

import Vue from 'vue' 
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld' 
Vue.use(Router) 
export default new Router({ 
/*路由文件，path 路径，对应的组件为 HelloWorld，即在浏览器地址为/时，在 router-view 位置显示 HelloWorld 组件*/ 
     routes: [ 
        { 
             path: '/', 
             name: 'HelloWorld', 
             component: HelloWorld 
        } 
     ]
 })

输入 npm run dev 命令来启动项目

 

Vue 项目是自带热部署的。 
如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config>index.js，如图所示。如果正常显示忽略此操作。

修改端口号是为了防止端口号被占用。 
把 assetsPublicPath 属性前缀修改为 ' ./ '（原本为 ' / '），是因为打包之后， 外部引入 js 和 css 文件时，如果路径以 ' / ' 开头，在本地是无法找到对应文件的（服 务器上没问题）。所以如果需要在本地打开打包后的文件，就得修改文件路径。

在控制台中输入：npm run build 命令对当前 Vue 项目进行打包如图 所示。

打包完成，会输出 Build complete 并且在 Vue 项目中会生成一个 dist 的打包文件。如图  所示

使用静态服务器工具包发布打包

步骤 01 首先安装全局的 serve，输入命令：npm install -g serve，如图所示。

步骤 02 在 webstorm 控制台输入命令：
serve dist    //serve + 打包文件名

 

使用动态 web 服务器(tomcat)发布打包
步骤 01 修改配置 webpack.prod.conf.js 文件，如图所示。

步骤 02 重新打包

步骤 03 将 dist 文件夹拷贝到运行的 tomcat 的 webapps 目录下，修改 dist 文件夹为 项目名称

Vue官方推出一款chrome插件Vue-devtools，Vue-devtools是一款基于chrome游览器的插件，用于调试Vue应用，这可以极大地提高我们的调试效率

Vue-devtools 的安装
通过 github 上下载 Vue-devtools 库，网址为：https://github.com/vuejs/vue-devtools/tree/v5.1.1。使用 git 下载，命令如下：
git clone https://github.com/vuejs/vue-devtools


在 vue-devtools 目录下安装依赖包，命令如下：
cd vue-devtools //进入文件目录 npm install 
//如果安装太慢可以用 cnpm 代替

编译项目文件，命令如下：
npm run build

修改 manifest.json 文件，把"persistent":false 改成 true。一般所在路径是：自定义路径vue-devtools-5.1.1shellschromemanifest.json。

使用谷歌浏览器输入 chrome://extensions/进入插件界面。

点击加载已解压程序按钮， 选择 Vue-devtools > shells > chrome 放入， 安装成功如图 所示