webpack是现在较流行的前端自动化工具,该工具可以帮助开发者打包代码,以减少需要手动的工作,可以提高开发效率。

vue中提供了一个脚手架工具vue-cli,这个工具已经将webpack配置好了,使用这个工具可以快速地搭建一个标准项目。

一、安装node

1.在 https://nodejs.org/zh-cn/   去下载,根据你的机型来选择。

2.检查node是否安装成功

mac:在终端输入 node -v

windows:打开命令行工具,输入 node -v

出现版本号则安装成功

3.查看npm是否安装成功

mac:终端输入 npm -v

windows:打开命令行工具,输入npm -v

出现版本号则安装成功

windows系统下安装成功

二、全局安装vue vue-cli

1.使用命令安装

mac:

sudo npm install vue @vue-cli -g

windows:

npm install vue @vue-cli -g

安装时遇到问题可以参考:

https://blog.csdn.net/gebitan505/article/details/48177405

2.查看vue是否安装成功

vue -V

三、初始化一个vue项目

1.使用命令行

vue create 项目名(你自己定义的,并且一定要记得安装的路径)。

2.之后会让你先择预设,作为初学者我们暂选第一项:default选项。接下来就是安装过程。

会把各种依赖,以及vue的框架结构都帮我们搭建好。安装好后,你会看到里面多了很文件以及文件夹。

四、查看vue项目是否搭建成功

1.使用命令行进入之前创建的项目

cd 项目名(初始化的时候定义的项目名称)

2.启动服务

npm run serve

这个命令会开启一个localhost, 复制这个 localhost地址到浏览器,回车打开,会看到一个vue欢迎界面。

如果能够正常打开,说明搭建成功!

原文链接:https://mp.weixin.qq.com/s/n9T6M2Md0UirnQWcmP_8Zg

vue--使用vue-cli构建项目的更多相关文章

  1. VUE学习笔记之vue cli 构建项目

    一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...

  2. 使用 .NET CLI 构建项目脚手架

    前言 在微服务场景中,开发人员分配到不同的小组,系统会拆分为很多个微服务,有一点是,每个项目都需要单元测试,接口文档,WebAPI接口等,创建新项目这些都是重复的工作,而且还要保证各个项目结构的大体一 ...

  3. @vue/cli 构建得项目eslint配置

    如下:package.json // package.json { "name": "ecommerce-mall-front", "version& ...

  4. 转载: 我如何使用 Django + Vue.js 快速构建项目

    原文链接: https://www.ctolib.com/topics-109796.html 正文引用如下 引言 大U的技术课堂 的新年第一课,祝大家新的一年好好学习,天天向上:) 本篇将手把手教你 ...

  5. Vue(1):用Vue-cli构建Vue3项目

    使用Vue-cli构建Vue3项目 1.检查node版本 node -v 以上node版本位14.15.0满足Vue3项目的创建条件(Vu3需要node 版本8以上) 为什么需要安装node? vue ...

  6. 搭建VUE项目的准备(利用vue-cli来构建项目)

    首先需要明确的是:Vue.js 不支持 IE8 及其以下 IE 版本,一般用与移动端,基础:开启最高权限的DOS命令(否则会出现意外的错误提示)   注意:个人小推荐如果我们不知道如何才能开启最高权限 ...

  7. vue框架构建项目流程

    构建项目流程: 1.全局查询:node -v 2.全局初始化:npm install --global vue-cli 3.模块化工程:vue init webpack myapp--->y,n ...

  8. vue 构建项目vue-cli

    1.首先得有node和npm的环境,node的下载:http://nodejs.org/download/.安装node之后,npm也自动生成了,显示版本号就意味着安装成功 2.接下来就是安装vue- ...

  9. vue 构建项目遇到的请求本地json问题

    在本地测试的json没有问题,但是打包后,发现json 的路径不对了,变成了绝对路径 解决方法: 建立的json文件需要放置  根目录/static下.如项目名/static/data.json,这边 ...

  10. vue 构建项目 文件引入

    1.vue引用依赖文件.  举例:axios 先安装 axios.如果直接安装 vue-axios 会报错 npm install axios npm install --save axios vue ...

随机推荐

  1. js中级小知识4

    1.针对表单 form   input     select      textarea type="radio/checkbox/passdord/button/submit/reset/ ...

  2. 使用强类型DataSet增加数据并获取自动增长的ID

    使用强类型的DataSet可以方便的操作数据库:有时候我们会对表的ID设置为自动增长,并且需要在插入数据后获取新插入数据的ID,按以下方法即可达到目的: 一.     首先建立一个表,id为自动增加, ...

  3. 使用jsonp请求本地json文件

    使用jsonp解决请求本地文件跨域问题 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  4. makefile编写规则

    cc = g++ -std=c++11 prom = calc deps = FtTest.h obj = FtTest.o newft.o LIBS = -lgtest_c11 $(prom): $ ...

  5. 使用hashlib进行文件校验

    import hashlib import os path = r'D:\CentOS 64 位' def file_md5(path): """ 文件校验 :param ...

  6. 使用js对WGS-84 ,GCJ-02与BD-09的坐标进行转换

    获取到经纬度在用百度地图进行定位时,却发现行驶轨迹的路线定到海里面去了.从网上查阅,知道此方法. 出处:https://www.jianshu.com/p/53f00ba897f7 一.在进行地图开发 ...

  7. caffe报错:cudnn.hpp:86] Check failed: status == CUDNN_STATUS_SUCCESS (3 vs. 0) CUDNN_STATUS_BAD_PARAM 原因

    在实际项目中出现的该问题,起初以为是cudnn版本的问题,后来才定位到在网络进行reshape操作的时候 input_layer->Reshape({(), input_layer->sh ...

  8. SpringBoot-性能优化之扫包优化

    性能优化 组件自动扫描带来的问题 默认情况下,我们会使用 @SpringBootApplication 注解来自动获取应用的配置信息,但这样也会给应用带来一些副作用.使用这个注解后,会触发自动配置( ...

  9. POI大数据Excel生成

    package com.hd.erpreport.controller; import java.io.File; import java.io.FileOutputStream; import ja ...

  10. cocos2d-x JS 富文本

    var str1 = "兑换成功后,系统会生成“";var str2 = "红包兑换码";var str3 = "”,请复制该兑换码,并粘贴在&quo ...