仅介绍 Windows 下 Vue 的安装
Vue 是一套构建用户界面的渐进式框架,只关注视图层, 采用自底向上增量开发的设计
1、安装 node.js
进入 node.js 官网,下载并安装 node.js
https://nodejs.org/en/download/
安装步骤略,基本是一路 next 默认即可。附中文文档地址 http://nodejs.cn/
安装后,打开 cmd ,分别输入 node -v 与 npm -v 来查看是否安装成功
2、安装 Vue-cli 脚手架
全局安装配置 npm install -g vue-cli 如果只想在某个项目中使用,可在该目录下执行 npm install vue-cli 即可,如下
注:如果直连网络慢,可将 npm 连接源改为淘宝镜像
npm install -g cnpm --registry=http://registry.npm.taobao.org
安装成功即可使用 cnpm 代替 npm 进行安装,如上一步安装 Vue 脚手架可执行 cnpm install -g vue-cli
3、安装 webpack
执行 npm install -g webpack
4、创建 Vue 项目
在指定目录,执行 vue init webpack vuedemo (其中的 vuedemo 表示要创建的项目的名称)
然后需要输入项目的一些信息,如下
其中需要注意的是 Use ESLint to lint your code? 是否使用严格模式,选择 no ,因为严格模式下可能会出现比较多的警告和错误提示问题
5、项目目录结构
项目初始化成功后,目录结构如下
其中 src 既是项目源码放置路径,components 是公用组件模块目录,assets 是资源路径,router 是路由,main.js 是项目入口 js 文件。搭建的页面 Vue 文件可放置在 components 下,也可另外新建一个目录存放,如 page
至此项目创建完成
6、运行项目
使用命令进入到 Vue 项目根目录,执行 vue run dev ,即可启动项目,然后可在浏览器中输入 localhost:8080 查看项目
浏览器打开效果如下,该页面既是 src 目录下的 App.vue