vue学习的第一天——vue项目的创建

一.下载node(https://nodejs.org/zh-cn/download/),当下载成功后查看node和npm的版本出现说明成功,然后对node.js的环境进行配置。(node版本不安超过17的版本)

vue学习的第一天——vue项目的创建_第1张图片

二.下载vue

npm install vue -g
cnpm install vue -g     //若npm换成cnpm就使用这一条

要是下载比较慢的话可以修改npm的默认配置

npm config set registry https://registry.npm.taobao.org   //使用淘宝镜像

要是还是很慢的话就安装cnpm

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

三.查看安装的vue信息

npm info vue 
cnpm info vue

vue学习的第一天——vue项目的创建_第2张图片

四.安装webpack模板

npm install webpack -g
npm install --global webpack-cli     //安装webpack-cli
webpack -v                            //查看版本号

五. 安装vue-cli脚手架

npm install vue-cli -g
vue --version     //查看版本

 六.安装vue-router

npm install -g vue-router

 ps:该安装的东西终于安装完了。。。。。现在开始创建vue

七.创建vue项目

vue学习的第一天——vue项目的创建_第3张图片

vue create hello         //创建一个为hello的vue项目

vue学习的第一天——vue项目的创建_第4张图片

vue学习的第一天——vue项目的创建_第5张图片

vue学习的第一天——vue项目的创建_第6张图片

vue学习的第一天——vue项目的创建_第7张图片

vue学习的第一天——vue项目的创建_第8张图片 vue学习的第一天——vue项目的创建_第9张图片

 vue学习的第一天——vue项目的创建_第10张图片

vue学习的第一天——vue项目的创建_第11张图片

vue学习的第一天——vue项目的创建_第12张图片

 vue学习的第一天——vue项目的创建_第13张图片

vue学习的第一天——vue项目的创建_第14张图片

vue学习的第一天——vue项目的创建_第15张图片

 vue学习的第一天——vue项目的创建_第16张图片

你可能感兴趣的:(网页开发学习,vue.js,学习,npm)