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进行快速 ...
随机推荐
- 用css、如何让图片自动适应屏幕大小,不出现滚动条,不变形,兼容各个浏览器?急!!!
如果是个背景图的话,定义一个div,高100%,宽100%,里面放个img<div class='bg'> <img src="images/bg.jpg" al ...
- Global.asax文件
转载:http://www.cnblogs.com/I-am-Betty/archive/2010/09/06/1819558.html 概述: Global.asax文件也叫做asp.net应用程序 ...
- ajax异步刷新请求数据
AJAX是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新.AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XM ...
- Jquery实现对select的操作
select实现对文本框的显示和隐藏 /** * 通过select的值实现对文本框的显示和隐藏 * #id为一个select控件 * .obj为一个文本框 */ function initSelect ...
- Android官方网站!
Android官方网站,所有Android相关文档.官方工具.示例,全部都在上面!! http://www.android.com/
- Linux查看修改文件句柄数
SuSE 11SP3 默认句柄数是1024 1.查看linux的文件句柄数 ulimit -a 2.修改文件句柄数 ①ulimit -n 65535②修改linux系统参数.vi /etc/secur ...
- Ubuntu与centos的区别小用法
给root设置密码 更新软件下载的地址 安装指令apt 使用ssh登录Ubuntu 使用ssh登录Ubuntu必须注意的地方,要先配置 sudo vi /etc/ssh/sshd_config 找到: ...
- MySQL中导出用户权限设置的脚本
在对MySQL数据库进行迁移的时候,有时候也需要迁移源数据库内的用户与权限.对于这个迁移我们可以从mysql.user表来获取用户的相关权限来生成相应的SQL语句,然后在目标服务器上来执行生成的SQL ...
- Delphi 键盘的编程
- Kay and Snowflake CodeForces - 686D (树的重心性质)
After the piece of a devilish mirror hit the Kay's eye, he is no longer interested in the beauty of ...

