vue-cli构建一个工程
使用前,必须要先按照 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构建一个工程的更多相关文章
- Vue+webpack构建一个项目
1.安装CLI命令的工具 推荐用淘宝的镜像 npm install -g @vue/cli @vue/cli-init 2.使用命令构建一个名为myapp的项目 vue init webpack m ...
- 使用vue/cli 创建一个简单的项目
首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...
- VUE学习笔记之vue cli 构建项目
一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...
- @vue/cli 构建得项目eslint配置
如下:package.json // package.json { "name": "ecommerce-mall-front", "version& ...
- vue cli 构建的 webpack 项目设置多页面
1. webpack-dev-server下的设置(npm run dev) ./build/webpack.dev.conf.js 中,修改 new HtmlWebpackPlugin ,一个页面一 ...
- 使用Vue CLI构建Vue项目
第一步:首先在控制台输入vue --version,如果出现版本号则进入第三步:否则进入第二步: 第二步:输入npm install cnpm -g --registry=https://regist ...
- @vue/cli 构建得项目eslint配置2
使用ESLint+Prettier来统一前端代码风格 加分号还是不加分号?tab还是空格?你还在为代码风格与同事争论得面红耳赤吗? 正文之前,先看个段子放松一下: 去死吧!你这个异教徒! 想起自己刚入 ...
- [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍
一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...
- 【Vue CLI】从安装到构建项目再到目录结构的说明
目录 1. 构建我们的项目 2. 目录结构说明 2.1 build目录 2.2 config目录 2.3 src目录 2.4 static目录 "Vue CLI是一个基于Vue.js进行快速 ...
随机推荐
- Mysql8 root密码忘记了
需要确定自己的mysql版本是否是8 [root@smonitor ~]# mysql --version mysql Ver 8.0.13 for Linux on x86_64 (MySQL Co ...
- java中如果删除导入的jar包,工程出现叹号解决方案
第一步:在工程上右键 第二步:选中build Path 第三步:选择Configue bulid path 第四步:选择liberary 第五步:鼠标点击带红色叉叉的 第六步:点击edit 第七步:点 ...
- 107、如何配置 Health Check ? (Swarm14)
参考https://www.cnblogs.com/CloudMan6/p/8053323.html 容器状态是UP的,那应用就是健康的吗? 不一定 Docker 只能从容器启动进程的返 ...
- spark精华面试题
1.driver的功能是什么? 1)一个Spark作业运行时包括一个Driver进程,也是作业的主进程,具有main函数,并且有SparkContext的实例,是程序的人口点: 2)功能:负责向集群申 ...
- html/css中map和area的应用
一.使用方法: 因为map标签是与img标签绑定使用的,所以我们需要给map标签添加ID和name属性,让img标签中的usemap属性引用map标签中的id或者name属性(由于浏览器的不同,use ...
- JQuery——关于CDN(内容分发网络)
替代方案 如果您不希望下载并存放 jQuery,那么也可以通过 CDN(内容分发网络) 引用它. Staticfile CDN.百度.又拍云.新浪.谷歌和微软的服务器都存有 jQuery . 如果你的 ...
- 使用sublimeserver启动本地服务器进行调试
最近在做前后端分离的项目,访问后台接口的时候会产生跨域问题,修改了相关配置解决了跨域问题,但是配置中只对开发环境进行了设置,没有设置生产环境,为了验证生产环境确实无法访问后台接口遂npm run bu ...
- mybatis的if
<select id="findList" resultType="BndExport"> SELECT <include refid=&qu ...
- CentOS7搭建FastDFS V5.11分布式文件系统(二)
1.CentOS7 FastDFS搭建 前面已下载好了要用到的工具集,下面就可以开始安装了: 如果安装过程中出现问题,可以下载我提供的,当前测试可以通过的工具包: 点这里点这里 1.1 安装libfa ...
- linux命令详解——vim
显示行号:命令模式下set nu 定位到指定行: 命令模式下,:n 比如想到第2行,:2 编辑模式下,ngg 比如想到第5行 5gg(或者5G) 打开文件定位到指定行 vim +n te ...

