使用前,必须要先按照 node:安装node

  Vue CLI官方文档:https://cli.vuejs.org/zh/
  安装node地址:https://nodejs.org/zh-cn/download/

安装后node文件如下:

需要配置环境变量

然后,就可以使用 npm 命令安装了:

打开cdm命令行输入以下命令

npm install -g @vue/cli

检测是否真的安装成功。打开cmd命令,查看一下node和自带的npm的版本信息

然后,就可以使用 vue 命令创建、管理项目了:

# 先切换到相应目录
e:
cd myhomework # 然后创建项目
vue create vue-hello-world # 创建完后,切换到项目目录
cd vue-hello-world # 接下来,启动项目服务器
# 服务器启动后,就可以使用 http://localhost:8080 访问到首页了
npm run serve # 然后就可以进行开发了
# - public 下面放一些全局静态文件
# - src 下面存在 main.js 跟相关 .vue 文件
# -- main.js 是入口 js 文件 # 开发完成后,就可以将工程打包、分发,运行在客户端了
# 执行完命令,打包的内容会在 dist 文件夹中
npm run build ## 另外,也可以使用图形化界面的形式进行(不推荐)
vue ui

效果展示:

vue-cli构建一个工程的更多相关文章

  1. Vue+webpack构建一个项目

    1.安装CLI命令的工具  推荐用淘宝的镜像 npm install -g @vue/cli @vue/cli-init 2.使用命令构建一个名为myapp的项目 vue init webpack m ...

  2. 使用vue/cli 创建一个简单的项目

    首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...

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

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

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

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

  5. vue cli 构建的 webpack 项目设置多页面

    1. webpack-dev-server下的设置(npm run dev) ./build/webpack.dev.conf.js 中,修改 new HtmlWebpackPlugin ,一个页面一 ...

  6. 使用Vue CLI构建Vue项目

    第一步:首先在控制台输入vue --version,如果出现版本号则进入第三步:否则进入第二步: 第二步:输入npm install cnpm -g --registry=https://regist ...

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

    使用ESLint+Prettier来统一前端代码风格 加分号还是不加分号?tab还是空格?你还在为代码风格与同事争论得面红耳赤吗? 正文之前,先看个段子放松一下: 去死吧!你这个异教徒! 想起自己刚入 ...

  8. [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍

    一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...

  9. 【Vue CLI】从安装到构建项目再到目录结构的说明

    目录 1. 构建我们的项目 2. 目录结构说明 2.1 build目录 2.2 config目录 2.3 src目录 2.4 static目录 "Vue CLI是一个基于Vue.js进行快速 ...

随机推荐

  1. (转)Dubbo服务暴露过程源码分析

    参考

  2. java实现spark常用算子之distinct

    import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaRDD;import org.apache.spark.a ...

  3. java中的全局变量、局部变量与静态常量的区别

    java中的变量类型分类: 类变量:独立于方法之外的变量,用 static 修饰.实例变量:独立于方法之外的变量,不过没有 static 修饰.局部变量:类的方法中的变量.比如: public cla ...

  4. 1.什么是bat文件

    bat文件是dos下的批处理文件.批处理文件是无格式的文本文件,它包含一条或多条命令.它的文件扩展名为 .bat 或 .cmd. 在命令提示下输入批处理文件的名称,或者双击该批处理文件,系统就会调用c ...

  5. log4net 报错

    之前在网上学习了一种log4net的日志监控,这种方式我觉得很不错,至少我个人认为很好,但是最紧缺发现一个为题,就是再session过期的时候页面跳转时候 会报错,这个搞了很久没搞明白,我直接用例子讲 ...

  6. Java语言基础(2)

    1 包的概念 把一个项目分割成几个模块,为每一个模块建立包,把该模块的.java文件统一放到对应包,通过包更好的管理.java文件,并且更好的分工合作.可以尽量避免出现.java文件重名现象. 包命名 ...

  7. (转) SpringBoot:使用spring-boot-devtools进行热部署以及不生效的问题解决

    在idea上怎么才能使用Spring的热部署 这里仅用Maven做介绍 (1)在Maven中添加依赖 (2)在插件配置 但是,为什么配置了还是没有用呢 ?! 这是因为idea默认是没有自动编译的,我们 ...

  8. 关于tp5.0中对象数组转换普通数组使用助手函数collection而不是toArray

    tp5.0新版的模型查询返回默认对象,系统默认增加了toArray方法,许多开发者在all或select尝试使用toArray来转换为数组,在此希望开发者能理解对象的概念,尝试使用对象进行数据的使用, ...

  9. hdu1864最大报销额 01

    先把小数乘100变成整数然后处理每个发票里面可以报销的 最后自底向上DP #include <stdio.h> #include <algorithm> #include &l ...

  10. GlusterFS ——分布式卷

    GlusterFS概述 全部部署GlusterFS文件系统地址:https://www.cnblogs.com/Mercury-linux/p/12050389.html GlusterFS系统是一个 ...