您的位置:首页 > Web前端 > Vue.js

vue-cli脚手架的安装与基础项目构建

2018-12-21 10:23 459 查看

环境搭建

 1.安装node.js,直接去官网下载就ok 传送门:https://nodejs.org/en/    安装成功之后 cmd  输入node -v  出现对应的版本号代表安装成功。

2.安装npm  :   cmd控制台输入  npm install

3.由于npm安装较慢  ,使用淘宝镜像提升速度,控制台输入 npm install -g cnpm –registry=https://registry.npm.taobao.org

   之后输入  cnpm -v查看版本号  出现如下所示代表成功

4.安装webpack

    cmd输入   :   cnpm install webpack -g

  webpack安装完成之后需要安装webpack-cli  注意  此时需要全局安装  控制台输入:cnpm install webpack-cli -g

安装成功之后输入   webpack -v   查看版本号  出现对应版本代表安装成功

5.安装vue-cli脚手架搭建工具 

 cmd输入:cnpm install vue-cli -g

然后输入vue -V   如果出现对应的版本号代表安装成功

至此,vue项目所需要的工具都已经安装好了,接下来使用vue-cli搭建一个最简单的vue项目

1.进入你想放工程的相关目录  cmd中使用  cd......指令(自行确认路径)    进入文件 之后安装vue   

   cmd输入  cnpm install vue

2.全局安装vue脚手架 (同样是在项目路径下)

 cmd输入: cnpm install –global vue-cli

3.创建一个基于 webpack 模板的新项目,打开命令输入:vue init webpack my-project 

具体每一个属性笔者也不是很清楚  所以从别的大佬那里扣了张图

完成 之后  输入 cnpm run dev      然后浏览器输入localhost:8080  会出现如下界面代表一个最简单的vue-cli项目搭建成功

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: