vue进阶：基于vue-cli建立项目（搭建手脚架）

• vue-cli安装、建立项目
• 基于vue-cli建立的项目进行开发
• 使用vue-cli图形化界面搭建项目
• 插件与工具

 1、vue-cli简介、安装、建立项目

Vue-cli是基于Vue.js进行快速开发的完整系统，提供：

• 经过@vue/cli搭建交互式的项目脚手架。
• 经过@vue/cli + @vue/cli-service-global快速开始零配置原型开发。
• 运行时依赖（@vue/cli-service）,该依赖：
  • 可升级；
  • 基于webpack构建，并带有合理的默认配置；
  • 能够经过项目内的配置文件进行配置；
  • 能够经过插件进行扩展。
• 丰富的官方插件集合，集成了前端生态中最好的工具。
• 彻底图形化的建立和管理Vue.js项目的用户界面。

这篇博客内容基于vue-cli3.x版本，Vue Cli致力于将Vue生态中的工具基础标注化，解决了咱们开发项目时须要考虑的代码结构、项目构建和部署、热加载、代码单元测试等事情。（以上内容摘自Vue-cli官网：https://cli.vuejs.org/）

1.1安装

npm install -g @vue/cli

也可使用cnpm安装，安装完成之后使用如下命令来检查版本以及是否正确：

vue --version

1.2使用vue-cli建立项目

vue create app-vue  //app-vue为建立的项目名称

执行命令后会出现预设项目，也就是项目搭建模板，这里会有以前保存的项目搭建方案，还有一个默认项目搭建方案，最后一个选项是进入自定义配置模式：

注：搭建vue项目时最好使用原生系统控制台搭建，便于使用上下键选择选项，在git的控制台中没法使用上下键操做选择。

选择Manually select features（手动配置功能）进入自定义配置vue项目环节：

这个配置功能的操做在原生系统控制台中一样是使用上下键来选择，经过空格键确认和取消选项。这些功能配置能够在这里勾选也能够在后期项目建立完成之后再安装，学过webpack的话就知道这些功能会被统一放到项目的node_modules文件夹下：

• Babel--用来将ES6语法转换成ES5的js语法
• TypeScript--用来处理TypeScript的模块
• Progressive web app (PWA) support--用来支持渐进式项目开发搭建的模块
• Router--用来配置项目路由的模块
• Vuex--用来处理支持多组件传值的模块
• CSS Pre-processors--CSS预处理器
• Linter / Formatter--检查代码风格,规范类型
• Unit Testing -- Unit测试方式
• E2E Testing -- E2E测试方式

选择完之后按下Enter键进入下一个环节：

• In dedicated config files--将每一个配置文件放到独立的专用文件中
• In package.json -- 将配置文件统一放到in package.json中（我选择了这个）

 选择完之后按下Enter键进入下一个环节：

• Save this as a preset for future projects? -- 将这个配置做为未来的预设配置（执行vue create ...命令建立项目后的第一步中选择预设就是这里决定，未来建立项目时会不会有这个预设

输入y表示设置这个配置做为未来的预设，N则表示不设置。若是选择y还须要输入预设的名称。而后就进入了正式的下载安装项目环节了：

 

安装成功之后：

而后进入项目根目录下：

cd app-vue

进入到项目根目录下后执行npm指令开启项目服务：

npm run serve//开启开发环境服务
npm run build//开启生产环境服务

开启项目服务后能够得到服务地址：

在浏览器地址栏键入服务地址，就能够打开项目的初始页面： http://localhost:8081/；项目的初始页面是vue项目的默认页面，接着使用编辑器打开项目，能够看到项目的所有结构：

node_modules       //项目依赖的包（项目依赖的系统模块）
public             //入口文件夹
    favicon.ico    //页面图标
    index.html     //入口html文件
src                //代码文件夹
    assets         //资源文件，通常放一下静态资源文件（例如：图片）
    components     //组件
    App.vue        //程序入口vue组件（根组件）
    main.js        //程序入口js文件
.gitignore         //用来过滤一些版本控制的文件，好比node_modules文件夹
babel.config.js    //babel配置文件
package-lock.json  //用于管理package之间的依赖关系的管理器，详细能够参考：http://www.javashuo.com/article/p-hegtsdnd-cc.html
package.json       //项目文件，记载一些命令和依赖还有简要的项目描述信息
README.md          //介绍本身这个项目的，能够参照github上star多的项目

 2、基于vue-cli建立的项目进行开发

index.html——主入口文件（页面结构文件）：用于编辑页面主体HTML结构布局，被抽取做为被打包页面的结构文本。

assets——资源文件，项目须要的静态资源文件放到该路径下。

components——项目组件库：项目开发的子组件都存放到这个路径下。

App.vue——程序组入口组件（根组件）：在组件内使用<template>定义组件模板、使用<script>编辑组件实现逻辑、使用<style>编辑组件样式。

main.js——程序入口JS文件：在这个文件中实现VUE实例与结构文本index.html的DOM绑定。

注：以上只是描述了vue-cli建立项目时自动生成的代码模板结构，vue-cli构建项目应用了webpack的一切皆模块的核心理念，在了解vue-cli以前最好具有webpack模块化项目经验，基于webpack的模块化结合vue-cli给出的手脚架模板进行开发，固然在复杂的项目生产中一定会根据自身须要进行相应的调整。

2.1在main.js文件中基于vue的router(路由)将各个文件(模块)转换成对象，并最后被main.js文件中建立的vue实例的对应属性引用成为自身的一部分，实现vue实例的构建。

2.2独立运行vue组件：

npm install -g @vue/cli-service-global//在全局安装独立运行vue组件的插件（建议使用cnpm下载）

而后进入到组件所在的目录，使用如下命令开启组件的独立服务（指令：vue serve 组件文件名称[含后缀]）：

vue serve HelloWorld.vue //开启模板自动生成的HelloWorld.vue组件的独立服务

开启独立组件服务一样会生成一个服务链接，经过接这个链接就能够访问这个独立组件：

经过独立运行组件能够和方便的测试单个组件，以上就是关于基于vue-cli（脚手架）搭建vue项目的一些开发基础内容，后期更多复杂的开发操做会有更详细的博客解析。

 3、使用vue-cli图形化界面搭建项目

使用命令在工做区间开启vue-cli图形化界面搭建项目：vue ul

vue ui

执行命令后会在默认浏览器上打开一个图形化搭建项目的链接界面：

若是没有自动开启这个页面的话可使用控制台打印出来的链接手动进入这个界面：

进入界面后点击建立开始建立vue项目：

点击：在此建立新的项目进入建立项目界面：

第一步须要配置项目根路径文件夹名称、包管理工具、是否覆盖已有相同的根目录文件夹、是否初始化git创库。配置好之后进入预设界面：

预设界面会列出以前预设的项目配置，能够经过勾选预设直接使用以前保存的项目配置，这里我选择手动配置项目，与以前的控制台配置同样给出了一系列的功能配置供咱们选择：

这里与以前控制台的选项一致就不展现了，选择好之后下一步一样是问咱们是否保存配置的预设，根据本身的需求勾选便可，若是须要保存预设一样须要配置预设的名称，最后确认系统就正式的进入了自动构建项目阶段（下载项目配置模块，安装。。。）

安装完成之后，控制台呈现的结果与使用命令安装是一致的，而且浏览器界面会跳转到下面这个页面：

 

 也有不能跳转到这个页面的状况，这时候可使用咱们一开始进入UI配置页面的首页使用导入的方式来导入配置好的项目：

 

 而后在这个界面还能够继续配置项目，后续的配置一样采用vue ui开启这个配置页面，使用导入进入到指定的项目进行管理操做。最后还可使用在可视化界面启动项目（点击任务）：

以上就是使用可视化界面建立和管理项目的所有过程。

 

最后关于如何删除vue预设配置模板：C盘：——用户文件夹——.vuerc(有可能被隐藏)：

找到.vuerc文件使用编辑器打开这个文件：

以上就是预设的配置信息，能够经过编辑器删除配置信息实现删除预设。

 

在使用vue create 项目名称 来建立项目时进入预设界面就没有了相关的预设配置：

这里就只剩下默认预设和自定义配置两个选项了。

 

一样在这个用户文件夹下还有一个vue-cli-ui文件夹，这个文件夹保存了vue ui的管理记录，当咱们执行vue ui命令时，会经过这个记录直接进入到上一次项目的管理界面，但有时候咱们须要进入的是vue ui的管理首页，在这个文件夹下有一个db.json文件，用编辑器打开清空里面的数据：

再次使用vue ui命令就能够进入到项目管理首页了。

 4、插件与工具

 在vue-cli3以前安装vue插件或者工具都采用npm install 插件名称 -S来安装，在vue-cli3中可使用vue add这个命令来安装插件，好比我下一篇博客解析的vue-router（vue路由）就能够经过如下命令来下载安装：

vue add router

更多详细的插件与工具安装能够了解官方文档：https://cli.vuejs.org/zh/guide/plugins-and-presets.html

这里针对一些可能须要深刻了解的部分进行解析：

其实vue-router没有本身的插件，包括vuex也是，但vue add仍然可使用。下载安装插件的完整操做方式应该按照下面这个示例来使用：

vue add @vue/cli-plugin-eslint

但通常状况下咱们能够采用这种简写的方式：

vue add @vue/eslint

上面这个命令@vue/eslint会被解析为完整的包名@vue/cli-plugin-eslint,而后从npm中调用它的生成器安装它。

若是不带@vue前缀，该命令会换做解析一个unscoped的包，例以下一命令会按照第三方插件vue-cli-plugin-apollo:

vue add apollo //安装并调用vue-cli-plugin-apollo

注意：vue add命令是为了安装和调用Vue cli插件，并不能替代npm包管理工具，普通的npm包依然须要使用npm来进行管理。