Vue CLI基础

关于Vue

• Vue.js:是一套构建用户界面的渐进式框架
• Vue CLI通常称为“VUE脚手架”，他是一个专门为单页面应用快速搭建复杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的工程模板
• Vue CLI相关文档的官网：http：//cli.vuejs.org/zh/guide/
• 所谓的单页面，指的是在工程中，理论上只有1个HTML页面，只不过这个页面的所有内容都是可以动态更新的，随时可以使用新的页面内容替换原有的内容，并且，还可以使得URL一并更新，从用户体验上来说，这种单页面应用与传统得前端应用并没有什么不同
• 注意：在使用传统模式开发得前端工程中，各个页面是相对独立得，甚至可以在本地硬盘上找到对应得html文件并双击直接打开它，而Vue CLI工程与一个Web应用程序一样吗，是需要启动服务才可以访问的，一定程度上，它的上手难度会更大一些，但是在大中型应用程序得开发中，它在开发效率、管理和维护成本上有更大的优势
• Vue CLI可以自动生成vue.js+webpack得工程模板，是为现代前端工作流提供了Batteries-included（自含全套工具集）得构建设置，只需要几分钟得时间甚至更短得时间就可以运行起来

关于npm

• npm全称是：Node Package Manager，可译为“Node包管理器”
• Isaac Z.Schlueter使用运行在Node.js之上的JavaScript语言开发了npm，它允许配置一个仓库，并将大量框架得文件放在了npm仓库中，并提供了一些列得管理命令，最终，开发人员只需要使用npm得命令，就可以在线获取到框架文件。通常，框架的文件会自动得存储到工程目录下，并在工程得配置文件中进行注册，开发人员只需要在主配置中进行导入及一些简单的配置就可以开始使用这些框架。
• 一定程度上，npm与Maven或Gradle是比较相似得

搭建开发环境

  安装Node.js

• 安装包会自动配置环境变量，安装完成后，可检查npm命令是否可用，在操作系统得命令提示符执行以下命令即可     
• 执行完以上命令后，将显示版本号，例如：

        

• 注意：必须在新的命令提示符窗口（安装完Node.js后再打开得窗口）中运行此命令

  配置npm源

• npm源（即npm仓库，称之为：registry）默认是境外服务器，在国内使用时，访问速度较慢，通常，在初次使用时，应该将npm源更换为国内得服务器地址
• 配置npm源得命令如下：

•  配置成功后，可以通过get命令查看npm源：

•  将显示当前生效得npm源，例如：

•  注意：无论使用哪种操作系统，必须保证当前登录得用户具有最高访问权限。例如，在Windiws操作系统中，请使用管理员模式得命令提示符，在Mac OS中使用sudo来执行。

  安装Vue CLI

• 安装Vue CLI命令如下：

• 以上命令中，-g表示全局安装，则当前操作系统中所有用户均可使用，并且自动配置Vue环境变量
• 此过程将从仓库服务器中下载Vue CLI，通常好事30s至5分钟左右。
• 提示：如果安装过程中得日志提示更新npm版本，或提示某些软件版本偏旧等，均可无视
• 注意：以上操作仍需要管理员权限才可以成功执行
• 安装完成后，通过以下命令检验Vue CLI是否安装成功：

 

• 注意：以上命令中得-V中的V是大写
• 执行以上命令后，将显示当前得Vue CLI版本号，例如

 

  创建工程

• 通常使用Vue得命令来创建Vue CLI工程，并且将给出创建在执行命令时得位置，所以，现在命令提示符窗口进入Vue Workspace，例如（以下#开头为注释）

•  进入Vue Workspace后，就可以创建工程了
• 使用vue create命令即可创建Vue CLI工程，

•  例如执行：

• 输入以上命令后，按下Enter键将准备创建工程，创建过程耗时较长
• 注意：不可以反复按Enter键，否则会视为选择各设置选项得默认项、

1. Please pick a preset表示“请选择一个预设项”，推荐选择Manually select features，表示“手动选择，

 

 2.Check the features need for your project，表示”选择你的工程需要实用的功能“，推荐选择

使用空格选中

 （注：列表中几个按钮得功能

）

3.Choose a version of Vue.js that you want to start the project with，表示”选择你得工程中希望使用得Vue.js得版本“，推荐

 

4.where do you prefer placing config for Babel，ESLint,etc.?，表示”你习惯把一些配置信息放在那里”，与i见In package.json

5.Save this as a present for future project？，表示“是否保存以上配置信息，作为后续将创建得新工程得预设”，推荐选择“否”，输入N然后按回车

 

 （注意：配置完毕。可以使用IDEA等开发工具打开项目，在Terminal执行各个命令）

• 计入工程目录，执行npm run serve名利即可启动（过程中会编译打包此工程）

•  提示以下信息，表示车工开启：

•  默认端口号为8080，若修改端口号，需要在工程跟目录下得package.json中修改script属性下serve得值：

 安装Element UI

• 首先进入工程文件夹（在IDEA中得Terminal中输入）

•  然后使用npm命令安装Element UI，以下两条命令等效

• 安装完成后，在工程得main.js中导入并使用Element UI，就可以使用了

 

安装axios

• 与安装Element UI相似，需要安装axios时，先切换到Vue CLI工程得文件夹下，然后运行命令以安装

•  安装完成后，需要在main.js中添加配置，配置代码：