使用vue脚手架工具搭建vue-webpack项目

对于Vue.js来说，如果你想要快速开始，那么只需要在你的html中引入一个<script>标签，加上CDN的地址即可。但是，这并不算是一个完整的vue实际应用。在实际应用中，我们必须要一系列的工具，包括：模块化，转译，预处理，热加载，静态检测和自动化测试等。对于一个需要长期维护和大型的项目而言，这些工具是必不可少的，但是尝试配置初始化这些很痛苦.这就是我们发布vue官方提供的脚手架工具的原因，一个简单的构建工具，通过几个默认的步骤帮助你快速的构建Vue.js项目。

1.安装node环境

可以使用自带的终端cmd命令行工具；windows下推荐安装git bash，可以使用linux命令；

第一步检测是否安装node；没有安装node的同学请到官网下载安装 https://nodejs.org/en/download/

安装成功后在命令行查看node版本，如果有说明安装成功。

2.安装vue脚手架工具vue-cli

大家在安装node的时候，会自动安装npm；

可以先行查看npm版本；

使用npm安装vue-cli：


1

npm install vue-cli -g

3.准备工作已经完毕，下面直接使用vue-cli初始化webpack项目；

vue init webpack yourprojectname(项目名)

中间会输入项目名称，项目描述，作者等信息；

一路回车

可以看到我们刚才创建的webpack项目已经建好了：

4.查看目录结构

安装依赖


1

$ npm install

国内有些包npm无法安装，可以使用cnpm安装


1

$ cnpm install

5.启动本地开发


1

npm run dev

　　

本地node服务器已经跑起来了，端口为配置文件中的端口

6.配置路由

创建新的页面组件，将路由指向该.vue 文件

到此，使用vue-cli创建的vue项目基本可以上手开发了，恭喜！

7.打包上线


1

$ npm run build

　

看到build complete，证明打包成功；

观察目录结构，发现多了一个dist文件夹，这便是webpack打包后的文件，将改文件和后台商量，以什么形式放到服务器即可，上线成功。

啦啦啦~ 至此，我们vue项目算是初步跑起来了，后续会详解webpack配置，以及本地mock数据开发等文章，欢迎大家批评指正！

时间： 2024-10-06 07:06:19

使用vue脚手架工具搭建vue-webpack项目的相关文章

rapid-framework脚手架快速搭建springMVC框架项目

rapid-framework介绍:   一个类似ruby on rails的java web快速开发脚手架,本着不重复发明轮子的原则,框架只是将零散的struts(struts2)+spring+hibernate各个组件组装好在一起,并对struts及struts2进行改造,提供零配置编程,并内置一个强大的代码生成器及模板文件,可以生成java的hibernat model,dao,manager,struts+struts2 action类,可以生成jsp的增删改查及列表页面.  整个项目

脚手架方式搭建vue项目

一.首先基于node环境,我想应该每一个前端开发者都应该懂的吧,这里安装运行什么的就不多说了. 搭建成功之后在文件夹的任何(如果是全局的话)一个位置都能按住shift键同时鼠标右键在工具框中就会出来一项--"在此处打开命令窗口"字样,点击就会出来,如图所示: 此位置就自动是你要创建项目的位置(当然,如果你想再创建文件夹,放在其他位置的话也可以直接输入打开命令npm cd+名字). 在这里你可以检查一下,如下图的话你就算成功了! 二.安装vue脚手架 输入命令:npm install -

使用vue-cli3（vue脚手架）搭建项目时遇到的问题

vue2.x  脚手架创建项目命令是 vue init webpack '项目名称' vue3.x  脚手架创建项目命令是 vue create  '项目名称'   (要求: 环境要求vue cli要求node版本8或者更高(8.10.0+推荐) vue cli3 需要node版本>=8.9, (官方推荐:8.11.0+ )) 1. vue create '项目名称' (选择一些配置) 1.1 问题来了: 我不想选择默认(default), 我想选择手动的,然而(上下箭头切换 , 空格是选中)不

用脚手架简单搭建vue开发环境

完成后目录展示: component文件里放的是页面,parts放的是入口文件main.js需要引入的js依赖. 事先安装cnpm.然后用脚手架工具 vue-cli 来创建一个使用 vue-loader 的项目: cnpm install -g vue-cli vue init webpack-simple myvue cd myvue cnpm install 接下来安装vue-router和vuex cnpm install vue-router vuex --save-dev 打开main

vue环境配置脚手架环境搭建vue工程目录

首先在初始化一个vue项目之前,我们需要下载node.js,并且安装! 下载地址: nodejs.cn/download 安装完成之后,windows+r 运行命令 cmd  输入node -v  检查是否已经安装成功.如果会显示版本信息,说明安装成功! 现在就可以使用node中的npm包管理器来构建vue项目 第一步,由于npm直接下载资源网速会比较慢,可以用淘宝镜像来代替,运行命令 npm install -g cnpm --registry=https://registry.npm.tao

安装vue脚手架及其他vue工具

一.安装vue脚手架   网上有许多教程,基本都是大同小异,不在这里班门弄釜了,具体可以参照下面链接这个博客. https://www.cnblogs.com/loveyaxin/p/7094089.html 二.安装vue工具之vue-devtools-dev 其实安装这个工具比安装vue脚手架更简单,注意细节就好. 1.在GitHub上下载压缩包,下载地址:https://github.com/vuejs/vue-devtools 2.将文件解压到任意盘,然后cmd到vue-devtools

Vue CLI 3搭建vue+vuex 最全分析

一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack 和 webpack-dev-server 之上(提供 如:serve.build 和 inspect 命令) CLI 插件:给Vue 项目提供可选功能的 npm 包 (如

使用vue-cli3（vue脚手架）搭建项目的步骤

平时经常会用到,记录一下! 准备工作 : 环境要求vue cli要求node版本8或者更高(8.10.0+推荐) vue cli3 需要node版本>=8.9, (官方推荐:8.11.0+ ) 有node的情况下就可以使用npm进行安装了 1.打开项目文件夹进入cmd 输入 npm install -g @vue/cli 或者 yarn global add @vue/cli 2.下载好之后输入vue create '你的项目名'   回车创建 3.接着就会进入问答环节(选择一些配置) 3.1

webpack+vue开发环境搭建

前提: 1.安装必要工具(node等); 2.安装全局vue-cli脚手架(快速搭建vue开发模板) 命令:npm install -g vue-cli 3.安装webpack 命令:npm install webpack -g (有问题可以使用npm install --save-dev webpack-cli -g命令) 4.运行命令: vue init webpack 项目名 注:回车后可能显示 Command vue init requires a global addon to be