vue-cli--2.X保姆式教程(零基础到运行项目)
基于webpack的Vue2.X脚手架安装
vue是什么?
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
如何系统的学习vue
在这里推荐两个 学习vue的网站:
vue.js官网:vue.js
菜鸟教程官网:vue菜鸟教程
淘宝镜像的安装
安装国内淘宝镜像 :
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
复制此链接到 cmd 终端 执行安装淘宝镜像
安装完淘宝镜像后就可以进行 cnpm 进行安装 Ps : cnpm install -g -vue-cli
安装vue-cli2.X脚手架
使用cmd键入npm install -g 在全局安装 cli脚手架
使用vue -V 查看版本号 当有了版本号就可以继续进行下面的操作
接着安装全局webpack包
装完后使用 vue init webpack + <项目名称>
例如 vue init webpack demo
接下来会有安装配置
生成vue-cli 项目
操作步骤:使用vue init webpa
2:选择cli基本配置
在输入项目名回车后会确定一系列的选择,我们接着回车下去
路由在写组件跳转的时候需要选择,下面的ESLint 检测代码是否规范,对于新手来说一般不推荐选择,它会检测代码是否规范,但不影响代码的运行结果
3 选择使用NPM 安装
4 进行到这一步后,我们需要等待,由于使用的是npm安装,可能下载时间会比较长,需要耐心等待
5 进入项目目录 cd
如图 cd demo 进入demo 目录
6 运行项目 上一步我们使用 cd demo进入demo项目后,npm run dev
当出现本地连接和端口号是表示着项目已创建成功
7 复制连接 http://localhost:8080到浏览器就可以运行 如图
到了此处 我们就可以在该项目里面进行开发
本次零基础教程到此结束 感谢观看