vue-cli安装以及搭建vue项目详细步骤

 时间:2026-02-15 13:14:54

1、第一步,检查node.js是否安装,通过命令提示符,node -v   npm -v查看,如果没有请先安装node.js,如下图.

vue-cli安装以及搭建vue项目详细步骤

2、第二步,把npm换成cnpm,

命令工具输入npm install -g cnpm --registry=https://registry.npm.taobao.org

然后cnpm -v查看版本,如下图

vue-cli安装以及搭建vue项目详细步骤

vue-cli安装以及搭建vue项目详细步骤

3、第三步,全局安装webpack,

使用命令工具输入cnpm install webpack -g。

使用webpack -v查看版本

如果webpack版本4以上,需要安装webpack-cli 依赖 

使用命令工具输入cnpm install webpack webpack-cli -g 如下图

vue-cli安装以及搭建vue项目详细步骤

vue-cli安装以及搭建vue项目详细步骤

4、第四步,安装vue-cli

使用命令工具输入cnpm install vue-cli -g

使用vue -V(这个V大写),如下图

vue-cli安装以及搭建vue项目详细步骤

vue-cli安装以及搭建vue项目详细步骤

5、第五步,上面步骤安装完后,就可以利用vue-cli初始化vue项目

在你想要安装项目的而目录下输入vue init webpack projectname(projectname是你项目的名称),

Project name:——项目名称

Project description:——项目描述

Author:——作者

Vue build:——构建模式,一般默认选择第一种

Install vue-router?:——是否安装引入vue-router,这里选是,vue-router是路由组件,后面构建项目会用到

Use ESLint to lint your code?:——这里强烈建议选no 否则你会非常痛苦,eslint的格式验证非常严格,多一个空格少一个空格都会报错,所以对于新手来说,一般不建议开启,会加大开发难度

Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch这两个是测试,可以不用安装

如下图

vue-cli安装以及搭建vue项目详细步骤

6、第六步,选择上一张图片的NO,I will handle that myself

然后输入cd projectname(你项目名称)

然后再输入cnpm install

如下图

vue-cli安装以及搭建vue项目详细步骤

vue-cli安装以及搭建vue项目详细步骤

7、第七步,输入cnpm run dev

最后在网址打开http://127.0.0.1:8080/如下图

vue-cli安装以及搭建vue项目详细步骤

vue-cli安装以及搭建vue项目详细步骤

8、最后附上项目的结构目录,如下图

vue-cli安装以及搭建vue项目详细步骤

  • css设置一个角的圆角大小
  • JAVA中jdk如何下载安装和卸载
  • myeclipse配置本地maven
  • Intellij IDEA 2017如何修改代码的字体大小
  • MyEclipse中添加新项目
  • 热门搜索
    深圳到欧洲旅游 河南开封旅游 石家庄旅游局 郑州旅游学校 公司旅游通知 驴友网 结伴旅游 最适合旅游的地方 旅游管理专业排名 西岭雪山旅游 台湾岛旅游网