Vue介绍 (官网)
Vue.js是一套构建用户界面的渐进式框架。
Vue 只关注视图层,采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
安装前你需要了解的一些知识
- HTML
- CSS
- Javascript
- 命令行工具
第一步安装node.js
先从node官网下载安装node环境,傻瓜式操作,一直‘next’,就可以了
安装完以后,打开命令行工具输入node -v,检测node是否安装成功。
再次输入npm -v,查看集成在node中的npm包是否安装成功。
出现对应版本则表示安装成功。
第二步安装cnpm
点击进入淘宝的cnpm网站,里面有详细的配置方法。
或者直接在命令行输入:
npm install -g cnpm --registry=https://registry.npm.taobao.org
等待安装完成,使用cnpm和npm的方法是一样的 下文都讲采用cnpm来替换npm
第三步安装vue-cli
vue-cli 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:
1.在安装脚手架工具之前 需要全局安装webpack。
命令行输入 cnpm insatall webpack -g 或者 cnpm install -g webpack
注意:webpack 4.X 开始,需要安装 webpack-cli 依赖 ,所以使用这条命令 npm install webpack webpack-cli -g
2.全局安装vue-cli,在cmd中输入命令:
cnpm install --global vue-cli
等待安装完成后 输入vue -V ;注意这里的-V是大写的V
创建一个基于 webpack 模板的新项目
要创建项目,首先我们要选定目录,然后再命令行中把目录转到选定的目录。可以使用:
#mydemo为自定义项目名
vue init webpack mydemo
之前碰到过一种不兼容的报错 提示 webpack 找不到 报错 可以尝试下使用:
vue-init webpack mydemo
我这里就出现不兼容问题 使用了第二种安装方式
等待安装完成后 如图 警告状态可以忽略
如图所示 打开项目目录 运行项目
输入以上操作 cd mydemo cnpm run dev
打开浏览器输入http://localhost:8081
好了 到这里恭喜你一个vue项目就搭建成功了 ,刚开始写博客 很多地方写的可能不是很通俗易懂,大佬勿喷,
这篇博客打算写一个系列的入门教程,近期再整理下补上第二章,项目配置文件解析,配置webpack 打包上线等。
一个正在前端路上向前摸索的初级初级程序猿
QQ:2557551314 欢迎大家加我 共同学习 一起进步。