码迷,mamicode.com
首页 > Web开发 > 详细

使用Node.js和vue.cli+element-ui搭建vue项目(一)

时间:2020-07-21 22:01:30      阅读:97      评论:0      收藏:0      [点我收藏+]

标签:resource   info   图片   save   下载   提示   taobao   out   完成   

一、安装Node.js

1.Node.js下载地址:

https://nodejs.org/en/download/

技术图片

最新的Node.js自带npm所以这里不再下载npm了。

下载完成后,双击打开程序,按提示一路next安装,有一个页面可能有点不一样,

技术图片

 选择第三个第四个都行。

2.安装完毕后我们查看是否安装成功和加入环境变量

技术图片

 如图所示即安装成功

3.安装淘宝的npm镜像cnpm

npm是国外的网址,有的时候可能下载会很慢,所以这个时候我们需要淘宝的镜像站

npm install -g cnpm --registry=https://registry.npm.taobao.org

 

二、安装vue相关的工具

1.安装webpack(项目构建、打包,进行资源整合用的)

cnpm install webpack -g

2.安装vue脚手架

npm install vue-cli -g

 

三、构建vue项目

1.指定我们第一个项目的构建位置

cd desktop

2.初始化一个项目

vue init webpack firstVue

最后一个参数是项目名称

3.运行完后会要求填写项目信息

技术图片

 项目信息还可以在项目后面的pakeage.json里面修改

4.安装项目依赖

npm -install

5.安装 vue 路由模块vue-router和网络请求模块vue-resource

cnpm install vue-router vue-resource --save

 

四、启动项目

npm run dev

启动完成后,会显示访问地址:

技术图片

 浏览器访问出现如下页面就搭建完成喏~

技术图片

 

 

使用Node.js和vue.cli+element-ui搭建vue项目(一)

标签:resource   info   图片   save   下载   提示   taobao   out   完成   

原文地址:https://www.cnblogs.com/theyang/p/13355077.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!