使用vue-cli（vue脚手架）快速搭建项目的方法

vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。这篇文章将会从实操的角度，介绍整个搭建的过程。

1. 避坑前言

其实这次使用vue-cli的过程并不顺利，反复尝试几次都遇到以下这个报错：

创建vue-cli工程项目时的报错

在网上查了很多资料才发现原来是node版本过低的问题，虽然没有找到官方对这个“过低”问题的解释，但是根据国外网友的经验之谈，应该是至少使用node6，我将node4更新至node8之后确实没有报错了，顺利搭建。相关答疑帖：https://github.com/vuejs/vue-cli/issues/618

确认node与npm的版本

将这个放在最前面说是希望大家在搭建前，应该先确保将node更新至6以上，这样能少走一些弯路。下面开始正式介绍整个构建过程。

2. 使用 vue-cli 搭建项目

下面整个过程是基于已经安装node.js和cnpm的基础上，node.js如何安装就不在这里详说了。如何全局化安装cnpm，这里简单提一下：

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

其实对于安装vue-cli，使用npm命令和cnpm命令都是可以的，个人觉得使用npm安装的比较慢，而且很可能会因为网络问题而出错，所以还是觉得使用cnpm稳一点。

（1）全局安装 vue-cli ，在命令提示窗口执行：

cnpm install -g vue-cli

安装vue-cli

出现以上提示表示vue-cli正常安装成功，可以正式创建vue-cli工程项目了。

（2）安装vue-cli成功后，通过cd命令进入你想放置项目的文件夹，在命令提示窗口执行创建vue-cli工程项目的命令：

vue init webpack

创建vue-cli工程项目

确认创建项目后，后续还需输入一下项目名称、项目描述、作者、打包方式、是否使用ESLint规范代码等等，详见上图。安装顺利执行后会，生成如下文件目录：

生成文件目录

（3）生成文件目录后，使用 cnpm 安装依赖：

 cnpm install

安装依赖

（4）最后需要执行命令： npm run dev 来启动项目，启动完成后会自动弹出默认网页：

启动项目

启动项目

默认网页

到这一步，就算成功利用vue-cli搭建一个vue项目了，撒花 ~

3.目录结构及其对应作用

通过vue-cli搭建一个vue项目，会自动生成一系列文件，而这些文件具体是怎样的结构、文件对应起什么作用，可以看看下面的解释：

├── build/           # webpack 编译任务配置文件: 开发环境与生产环境
│  └── ...
├── config/
│  ├── index.js        # 项目核心配置
│  └── ...
├ ── node_module/        #项目中安装的依赖模块
  ── src/
│  ├── main.js         # 程序入口文件
│  ├── App.vue         # 程序入口vue组件
│  ├── components/       # 组件
│  │  └── ...
│  └── assets/         # 资源文件夹，一般放一些静态资源文件
│    └── ...
├── static/           # 纯静态资源 (直接拷贝到dist/static/里面)
├── test/
│  └── unit/          # 单元测试
│  │  ├── specs/       # 测试规范
│  │  ├── index.js      # 测试入口文件
│  │  └── karma.conf.js    # 测试运行配置文件
│  └── e2e/          # 端到端测试
│  │  ├── specs/       # 测试规范
│  │  ├── custom-assertions/ # 端到端测试自定义断言
│  │  ├── runner.js      # 运行测试的脚本
│  │  └── nightwatch.conf.js # 运行测试的配置文件
├── .babelrc          # babel 配置文件
├── .editorconfig        # 编辑配置文件
├── .gitignore         # 用来过滤一些版本控制的文件，比如node_modules文件夹
├── index.html         # index.html 入口模板文件
└── package.json        # 项目文件，记载着一些命令和依赖还有简要的项目描述信息
└── README.md          #介绍自己这个项目的，可参照github上star多的项目。
build/

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 手把手教你使用vue-cli脚手架(图文解析)

    手把手教你使用vue-cli脚手架(图文解析)

    写在前面: 使用 vue-cli 可以快速创建 vue 项目,vue-cli很好用,但是在最初搭建环境安装vue-cli及相关内容的时候,对一些人来说是很头疼的一件事情,本人在搭建vue-cli的项目环境的时候也是踩了相当多的坑,特此写了一篇搭建环境的教程,每一步尽量详细解析.需要的朋友可以过来参考下. vue-cli脚手架的优势: 有一套成熟的vue项目架构设计,能够快速初始化一个Vue项目. vue-cli是官方支持的一个脚手架,会随本版本进行迭代更新. vue-cli提供了一套本地的nod

  • vue脚手架及vue-router基本使用

    首先在大前提vue-cli已经安装好的情况下,并且cnpm install后(官网使用的是npm,但这里推荐用cnpm比npm快而且npm有时候会有出现卡住的现象),这里有个小提醒就是关于是否开启eslint,这个是对你写的代码进行规范化的一个工具,对于刚接触的新手们建议关闭,不然代码写的不符合它的规范你的编译器会一直报错,如下图 安装好脚手架之后就像这样 终端输入npm run dev,然后打开localhost:8080就可以看到项目运行啦 大致分析一下几个比较常用的文件把,如下图 1.bu

  • 详解如何使用vue-cli脚手架搭建Vue.js项目

    详解如何使用vue-cli脚手架搭建Vue.js项目

    1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admin $ cd vue-admin $ npm install $ npm run dev 后面分步说明. 2. 安装 前提条件,Node.js >=4.x版本,建议使用6.x版本.npm版本 > 3.x 全局安装vue-cli $ npm install -g vue-cli 3. 使用 $ vue init

  • 使用vue脚手架（vue-cli）搭建一个项目详解

    1.首先得下载node.js.方法可自行百度. 2. 3.一开始报很多错误,后来用管理员就没问题了. 4. 5.如上图会遇到卡住的问题,解决方法是 在最后一个选项上选择No,I will handle it myselft,然后cd vue_test,然后cnpm install,这样就成功了,然后执行npm run dev就出现: 6.浏览器端访问localhost:8081 7.项目目录 8.图片来源于网络 以上所述是小编给大家介绍的vue脚手架(vue-cli)搭建项目详解整合,希望对大家

  • VUE脚手架具体使用方法

    什么是vue脚手架? 他是一个快速构建 vue 项目的工具,通过他,我们可以将 vue 所需要的文件安装完成. vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-dev-server的支持, 相当于启动了一个请求服务器,给你搭建了一个测试环境,只关注开发就OK. 安装 vue-cli 脚手架 安装脚手架需要用 cnpm( 淘宝镜像 ) 安装 , 直接用 pip 安装 会失败 , 安装 cnpm 命令如下 : npm install cnpm -g --r

  • vue-cli3脚手架的配置及使用教程

    这次给大家带来vue-cli3.0配置及使用详解,写给需要的朋友. Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发. 一个运行时依赖 (@vue/cli-service),该依赖:一个丰富的官方插件集合,集成了前端生态中最好的工具. 可升级: 基于 webpack 构建,并带有合理的默认配置: 可以通过项目内的配置文件进行

  • Vue脚手架的简单使用实例

    提前申明 注意:自己对vue脚手架的理解和认识,很多东西和理解都是形象上的手法,并不专业和官方 webpack 一种项目构建工具,可以将css和js压缩成一个文件.此外,可以提供测试用服务器.使用webpack时,可以配置一些默认扩展名 和 路径别名 来在项目文件里直接使用 导入和导出 使用export命令可以将一个JS对象导出,其他JS文件可以使用import 对象名 from 路径的形式导入这个对象来使用,但是在导入时,必须知道导入导出对象的名字.如果使用export default命令导出

  • vue.js的vue-cli脚手架中使用百度地图API的实例

    vue.js的vue-cli脚手架中使用百度地图API的实例

    第一步,去百度地图开发者申请密钥. 1.申请密钥(百度地图开放平台-->开发文档-->web开发-->JavaScript  API-->立即使用-->创建应用) 2.密钥申请成功后 第二步,在项目的需要模板中引入,具体如下: 项目路径 其中index.html存放地图链接,代码如下 在百度地图开放平台 服务介绍中 选择我们所需要的地图类型  demo演示可查看 选择我们所需哪种百度地图的类型:http://lbsyun.baidu.com/index.php?title=j

  • vue脚手架vue-cli的学习使用教程

    vue-cli的模板 vue-cli的脚手架项目模板有webpack-simple 和 webpack 两种的区别在于webpack-simple 没有包括Eslint 检查等功能 vue-cli的项目结构 . |-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node.npm等版本 | |-- dev-client.js // 热重载相关 | |-- dev-server.

  • 使用vue-cli（vue脚手架）快速搭建项目的方法

    使用vue-cli（vue脚手架）快速搭建项目的方法

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目.这篇文章将会从实操的角度,介绍整个搭建的过程. 1. 避坑前言 其实这次使用vue-cli的过程并不顺利,反复尝试几次都遇到以下这个报错: 创建vue-cli工程项目时的报错 在网上查了很多资料才发现原来是node版本过低的问题,虽然没有找到官方对这个"过低"问题的解释,但是根据国外网友的经验之谈,应该是至少使用node6,我将node4更新至node8之后确实没有报错了,顺利搭

  • vite+vue3.0+ts+element-plus快速搭建项目的实现

    vite+vue3.0+ts+element-plus快速搭建项目的实现

    vite 出了 2.x 版本,抱着学一学的心态决定出个简单的项目,结合 element-plus,以及将会成为每位前端必会的 typescript,实现了如下内容. vite是一个由原生 ESM 驱动的 Web 开发构建工具.在开发环境下基于浏览器原生 ES imports 开发,在生产环境下基于 Rollup 打包. vite 作用 快速的冷启动:不需要等待打包操作: 即时的热模块更新:替换性能和模块数量的解耦让更新飞起: 真正的按需编译:不再等待整个应用编译完成,这是一个巨大的改变. 使用的

  • 基于Vue和Element-Ui搭建项目的方法

    首先要求事先安装node和npm 没有安装的自行百度或在论坛里面搜索! 提示:在命令行分别输入node -v(node和-v之间有个空格) 和npm -v(同样有个空格)可查看当前的node和npm版本 创建vue项目 1.创建一个项目文件夹,记住文件夹路径,如我的是F:\AppCode 2.打开cmd命令通过cd指令进入到刚才创建的文件夹路径F:\AppCode. 输入npm install -g cnpm –registry=https://registry.npm.taobao.org安装

  • 基于Vue-cli快速搭建项目的完整步骤

    基于Vue-cli快速搭建项目的完整步骤

    前言 vue-cli 是一个官方发布 vue.js 项目脚手架,Vue-cli可以快速帮助我们创建一个项目,这是官方给我们提供的脚手架.下面我说一下vue-cli的使用方法. 下面话不多说了,来一起看看详细的介绍吧 一.准备工作 在使用vue-cli时,首先需要安装nodejs,npm,其次需全局安装vue和vue-cli 1.nodejs和npm安装方法详见:https://www.jb51.net/article/90518.htm 2.npm install -g vue 3.npm in

  • vue-cli4.5.x快速搭建项目

    vue-cli4.5.x快速搭建项目

    一.安装vue-cli npm i @vue/cli -g 二.创建项目 vue-cli会创建一个完整的项目文件夹,内部包含src等,我们仅需要cd进打算放置这个项目文件的文件夹内执行如下代码即可; 1.生成项目文件; 终端输入: vue create projectname 2.选择生成配置方式 此处选择最下面一项进行手动配置 (你要是喜欢用eslint就直接选vue3那项就好) 3.插件选择 选择你需要的插件,上下箭头移动,空格切换选取状态 选错或漏选?没事,构建完毕后你依然可以通过Vue

  • vue3.0+vant3.0快速搭建项目的实现

    vue3.0+vant3.0快速搭建项目的实现

    目录 一.项目的搭建 二.vue3体验+vant引入 2020年09月18日,vue.js 3.0正式发布,去网上看了看关于3.0的教程都不够完整,但其实vuecli最新版已经支持了vue3.0项目的快速搭建,这篇文章将带你了解一下vue3.0有哪些新的改变以及如何快速搭建vue3.0项目. 一.项目的搭建 1.首先,nodejs的安装不用我多说了吧,nodejs官网地址. 2.既然vuecli最新版已经可以快速搭建3.0了,那怎么升级到最新版呢?vue-cli官网地址,不知道vue-cli版本

  • 使用vue-cli webpack 快速搭建项目的代码

    使用vue-cli webpack 快速搭建项目的代码

    一.安装vue npm install vue -g 二.用vue-cli快速搭建项目 //全局安装vue-cli npm install install -g vue-cli //创建一个基于webpack模板的项目 vue init webpack [demoname] ? Project name (xxx) ? Project name xxxx ? Project description (A Vue.js project) ? Project description A Vue.js

  • Next.js脚手架完整搭建封装的方法步骤

    Next.js脚手架完整搭建封装的方法步骤

    针对实际的开发场景(SEO优化需求),我们直接使用next.js脚手架创建的项目还无法直接进行开发,需要再次进行配置封装搭建,这里分享一套自己的完整封装搭建给有需要的小伙伴使用; 内容包括:(1)sass样式配置;(2)axios拦截封装;(3)action模块化;(4)reducer模块化;(5)redux搭建;(6)dispatch示范;(7)saga中间件配置;(8)saga拦截示范;(9)useEffect异步请求示范;(10)getServerSideProps/getStaticPr

  • Linux环境下快速搭建ftp服务器方法介绍

    Linux环境下快速搭建ftp服务器方法介绍

    本文研究的主要是Linux环境下快速搭建ftp服务器方法,具体如下.首先看看ftp的介绍: FTP 是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为"文传协议".用于Internet上的控制文件的双向传输.同时,它也是一个应用程序(Application).基于不同的操作系统有不同的FTP应用程序,而所有这些应用程序都遵守同一种协议以传输文件.在FTP的使用当中,用户经常遇到两个概念:"下载"(Download)和"上

  • 使用Vert.x Maven插件快速创建项目的方法

    本文介绍了使用Vert.x Maven插件快速创建项目的方法,分享给大家,具体如下: 文档地址: https://reactiverse.io/vertx-maven-plugin 已有项目添加该插件 在项目 pom.xml 目录,执行下面的命令即可添加: mvn io.reactiverse:vertx-maven-plugin:1.0.17:setup 执行该命令后,在 pom.xml 中会增加下面的配置: <properties> <vertx.version>3.5.3&l

随机推荐