首先需要安装 node.js 环境(node是为了项目运行提供环境)

1.Node.js

官网地址:https://nodejs.org/en/

前端开发创建vue工程步骤

 

安装成功后:

前端开发创建vue工程步骤

 

2. npm

是node.js的包管理工具,node.js默认安装了指定版本的npm。

但是:由于在国内使用npm是非常慢的(npm install -g vue-cli),所以在这里我们推荐使用淘宝npm镜像,使用淘宝的cnpm命令管理工具可以代替默认的npm管理工具:npm install -g cnpm --registry=https://registry.npm.taobao.org;

3. 安装全局vue-cli脚手架

输入命令:cnpm install --global vue-cli 回车;

前端开发创建vue工程步骤

验证是否安装成功,在命令输入vue  -V,出来vue的信息,及说明安装成功;

3.1 安装打包工具webpack

输入命令:cnpm install webpack -g

4. 建一个新项目

搭建完手脚架之后,我们要开始建一个新项目(建议放在D盘)

输入命令:vue init webpack (项目名称)

然后会出现需要回车选择的选项,ESlint用于语法检测的暂时可以选择不安装

前端开发创建vue工程步骤

 

3.1,进入刚创建的项目文件夹(命令行)

3.2,在项目里安装依赖

各个模板之间都是相互依赖的,所以现在我们要安装依赖,在项目里输入以下命令。

输入命令:cnpm install

4,运行

一切环境依赖安装准备就绪,我们来测试一下自己新建的vue项目的运行情况,输入命令:cnpm run dev直接回车。会弹出一个浏览器访问地址默认为localhost:8080

前端开发创建vue工程步骤

一个简单的vue工程脚手架就搭起来了          

前端开发创建vue工程步骤                

 

学习参考文档:

https://cn.vuejs.org/v2/guide/index.html(vue官方文档)

http://hui.hundsun.com/#/docs/guide/install(HUI开发文档)

https://element.eleme.cn/#/zh-CN(Element文档)

 

 

 

相关文章: