Vue-cli 脚手架的安装与使用(详细说明)

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没安装成功,或者电脑环境没配置好

《Vue-cli 脚手架的安装与使用(详细说明)》 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 脚手架的安装与使用(详细说明)》 vue-cli安装.png

1.1.1.4 项目的搭建

使用vue –help查看Vue的可用的命令:

《Vue-cli 脚手架的安装与使用(详细说明)》 vue-help.png

使用vue list 命令操作显示如下:

《Vue-cli 脚手架的安装与使用(详细说明)》 vue list.png

在看看vue init的用法,输入vue init –help

《Vue-cli 脚手架的安装与使用(详细说明)》 vue-cli安装.png

使用如下命令构建项目:

vue init webpack my_vue_project_2018-04-05

《Vue-cli 脚手架的安装与使用(详细说明)》 构建项目.png

关于项目的运行操作:

《Vue-cli 脚手架的安装与使用(详细说明)》
运行效果.png

输入 npm run dev 运行下项目:

《Vue-cli 脚手架的安装与使用(详细说明)》 运行效果.png

1.1.1.5 项目目录结构

《Vue-cli 脚手架的安装与使用(详细说明)》 项目目录结构.png

详细说明参考文章:Gitbook文章

    原文作者:weir_will
    原文地址: https://www.jianshu.com/p/68ef83ce5b7b
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞