命令行工具搭建Vue.js脚手架

1、检查node环境

在安装vue的环境之前,安装NodeJS环境是必须的。可以使用node -v指令检查;

《命令行工具搭建Vue.js脚手架》

上面的版本是6.02.0的;

2、安装vue-cli

接下来进入正题,先全局安装vue-cli,使用指令npm install -g vue-cli;
《命令行工具搭建Vue.js脚手架》

用vue指令检查是否安装成功,出现以下界面则表示安装成功:

《命令行工具搭建Vue.js脚手架》

3、初始化项目

先cd到自己向要创建新项目的文件夹下,然后使用VUe init指令(vue init 模板类型 项目名称)vue的模板类型有很多种,可以使用vue list指令查看,如下图:

《命令行工具搭建Vue.js脚手架》

我们这里使用webpack模板,项目名叫sell,所以指令如下:
Vue init webpack sell
然后可以一路回车下去;结果如下图:

《命令行工具搭建Vue.js脚手架》

接下来进入sell文件夹,运行npm install指令,会发现项目中多了一个node_modules文件夹

《命令行工具搭建Vue.js脚手架》

《命令行工具搭建Vue.js脚手架》

4、运行Vue环境

接下来使用 npm run dev命令运行项目环境,效果如下:

《命令行工具搭建Vue.js脚手架》

这里显示了已经监听了8080端口,接下来在浏览器访问http://localhost:8080/
会看到如下页面:

《命令行工具搭建Vue.js脚手架》

生成的脚手架目录如下:

《命令行工具搭建Vue.js脚手架》

以上是Vue脚手架的基本的目录结构,我们一般编写代码都放在src目录下,这里有一个components文件夹,该目录用于存在自定义组件。src目录小还有一个App.vue,该文件是项目展示的窗口文件。

    原文作者:朱小猿
    原文地址: https://segmentfault.com/a/1190000010954652
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞