1.1.1.1 安装 Node.js
无疑 Node.js 是前端编程的必备环境配置之一. 安装过程非常简单, 与平时安装的一般软件无异. 官方网站: https://nodejs.org/en/
Node.js 自带 npm 包管理工具, 使用 npm 可使我们快速安装项目中所需要的组件. 打开 Node.js 命令行工具, 输入
- node -version # 查看 node 的版本
- npm -version #查看 npm 版本
可查看 Node.js 当前的版本, 如果没有出现版本号, 很可能是 Node.js 没安装成功, 或者电脑环境没配置好
node 版本
1.1.1.2 2. 安装 vue.js devtools 扩展程序
打开 Chrome 网上应用店, 安装 vue.js devtools. 这个插件, 便于我们在进行 Vue.js 开发过程中的调试, 是一个很有用的工具.
1.1.1.3 安装 vue-cli 脚手架工具
安装好了 node, 我们可以直接全局安装 vue-cli:
npm install -g vue-cli
如果安装失败, 可以使用 npm cache clean 清理缓存, 然后再重新安装. 后面的安装过程中, 如有安装失败的情况, 也需要先清理缓存但是这种安装方式比较慢, 推荐使用国内镜像来安装, 所以我们先设置 cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
同样可以使用 cnpm -v 查看是否安装成功
cnpm install -g vue-cli
安装完成后, 可以使用 vue -V (注意 V 大写) 查看是否安装成功.
vue-cli 安装. png
1.1.1.4 项目的搭建
使用 vue -help 查看 Vue 的可用的命令:
vue-help.png
使用 vue list 命令操作显示如下:
vue list.png
在看看 vue init 的用法, 输入 vue init -help
vue-cli 安装. png
使用如下命令构建项目:
vue init webpack my_vue_project_2018-04-05
构建项目. png
关于项目的运行操作:
https://upload-images.jianshu.io/upload_images/1625340-8ecc477dda36e6b2.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240
运行效果. png https://upload-images.jianshu.io/upload_images/1625340-8ecc477dda36e6b2.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240
https://upload-images.jianshu.io/upload_images/1625340-8ecc477dda36e6b2.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240
输入 npm run dev 运行下项目:
运行效果. png
1.1.1.5 项目目录结构
项目目录结构. png
详细说明参考文章: Gitbook 文章 https://loulanyijian.github.io/vue-cli-doc-Chinese/structure.html
来源: http://www.jianshu.com/p/68ef83ce5b7b