学习Vue CLI框架笔记

一.关于Vue CLI框架

通常称为"Vue 脚手架",是专门为单页面应用快速搭建繁杂的脚手架,可以轻松的创建新的应用程序而且可以自动生成vue和webpack的工程模板

所谓的单页面,是指在工程中,理论上只有1个html页面,只不过这个页面的所有内容都是可以动态更新的,随时可以使用新的页面替换掉原有的内容,并且,可以使得URL一并更新,用户体验与传统前端应用没有区别.

特别注意的是,Vue CLi工程与一个web应用程序一样,是需要开启服务才能访问的,在中大型的应用程序开发中,在开发效率,管理和维护成本上有更大的优势.

二.配置Vue CLI

第一步:安装Node.js,为了使用npm指令,Vue CLi工程的创建需要使用npm指令才能完成,因此,想要创建Vue CLi工程的第一步就是要安装Node.js

安装完成后,在命令行提示窗口cmd中输入 npm -v 来查看当前Node.js的版本信息,显示版本号则说明安装成功.

第二步:配置npm源

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

本文使用的是阿里仓库中npm源服务器地址

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

npm config get registry

第三步:安装Vue CLi

输入:

npm install -g @vue/cli

如果安装不成功,再次安装则必须先卸载原先的Vue CLi,卸载:

npm uninstall -g @vue/cli

安装完成后,使用vue -V来查看是否安装成功(此处的-V是大写,大小写一定要区分)

三.创建Vue CLI工程

通常使用Vue命令来创建Vue CLI工程,此命令会将工程创建在执行命令时的位置.所以要先进入到你想要创建工程的目录下输入以下命令:

vue create 工程名称

创建过程中,不能重复按回车,否则就会选择各选项的默认值进行创建

1.首先提示的选项是"Please pick a preset"选择一个预设项,推荐选择第三项,使用上下箭头进行选择,选择完成之后回车到下一步

2.接下来是Check the features needed for your project----选择你的工程中需要使用的功能

推荐选择:Babel,Router,Vuex三项,空格选择,然后回车

-Babel:ES6高级语法向低版本语法兼容的工具

-Router:路由管理器(管理请求路径与页面资源的映射关系)

-Vuex:全局状态管理工具(管理全局共享的内存中的数据)

-Linter:代码规范检验工具

3.接下来选择工程中Vue.js的版本,推荐选择2.X选项,回车

4.Use history mode for router?是否在路由中选择历史模式,直接回车,默认"是"

5."你习惯把一些配置信息存放在哪里?"选项,推荐选择 In package.json,回车

6.最后的选项:"Save this as a preset for future projects?"是否保存以上配置信息,作为后续将创建的新工程的预设?

此处直接回车,默认选择"否"

7.配置过程结束,等待创建,耗时取决于网络环境

三.启动服务

进入到工程目录下,即vue create 工程名称中的工程名称目录下,使用命令提示符

npm run serve启动工程

当提示出现

 表示工程成功启动!

四.访问工程主页

根据提示出现的localhost地址,在浏览器中进行访问

如果要停止服务,在命令提示符窗口中使用Ctrl+C,会提示"终止批处理操作嘛?Y/N",选择Y停止服务