关于vue-cli的安装
(一):*安装 vue-cli
参考:
https://cn.vuejs.org/v2/guide/installation.html
https://github.com/vuejs/vue-cli
全局安装:
npm install vue-cli -g 或者 npm install -g @vue/cli-init
cd到某文件夹下初始化:
cd ./vue_app
vue init webpack project_one(目录名称)
初始化配置一些信息:
通常: y/n y
eslint y/n n
jest y/n n
e2e y/n n
项目构建完成
开发环境中运行在本地 8080:
cd project_one
npm dev
localhost:8080 浏览器访问
(二):*上线前的打包(打包成静态文件,html,css,js)
npm run build
根目录下创建了dist文件夹,包含index.html和static文件夹
终端提示:
(Build complete.
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.)
意思是:构建文件务必放在一个HTTP服务器。直接打开index.html文件将不工作。
解决方式:
方法一:修改 ./config/index.js文件,
将build.assetsPublicPath: '/'修改成build.assetsPublicPath: './'
方法二:将dist文件部署到服务器环境即可运行
关于vue-cli的安装的更多相关文章
- vue cli的安装与使用
一.简介 vue作为前端开发的热门工具,受到前端开发人员的喜爱.为了简化项目的构建,采用vue cli来简化开发. vue cli是一个全局安装的npm包,提供了终端使用的命令.vue create可 ...
- Vue CLI 介绍安装
https://cli.vuejs.org/zh/guide/ 介绍 警告 这份文档是对应 @vue/cli 3.x 版本的.老版本的 vue-cli 文档请移步这里. Vue CLI 是一个基于 V ...
- Vue Cli安装以及使用
因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...
- 【Vue CLI】从安装到构建项目再到目录结构的说明
目录 1. 构建我们的项目 2. 目录结构说明 2.1 build目录 2.2 config目录 2.3 src目录 2.4 static目录 "Vue CLI是一个基于Vue.js进行快速 ...
- [转]Vue CLI 3搭建vue+vuex 最全分析
原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...
- vue cli创建typescript项目
使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...
- 使用vue/cli 创建一个简单的项目
首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...
- Vue CLI 3搭建vue+vuex 最全分析
一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...
- 13. Vue CLI脚手架
一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...
- 基于vue cli 3.0创建前端项目并安装cube-ui
前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...
随机推荐
- python3+telnetlib实现简单自动测试
1 telnetlib介绍 1.1 简介 官方介绍文档:telnetlib -- Telnet 客户端 - Python 3.9.6 文档 telnetlib 模块提供一个实现Telnet协议的类 T ...
- Python语言系列-01-入门
python的出生与应用 #!/usr/bin/env python3 # author:Alnk(李成果) """ 1,python的出生与应用 python的创始人为 ...
- 【MySQL】自定义数据库连接池和开源数据库连接池的使用
数据库连接池的概念 数据库连接背景 数据库连接是一种关键的.有限的.昂贵的资源,这一点在多用户的网页应用程序中体现得尤为突出.对数据库连接的管理能显著影响到整个应用程序的伸缩性和健壮性,影响到程序的性 ...
- 生成树-RSTP基础配置
实验内容: 一.实验拓扑: 二.实验编址: 三.实验步骤: 1. 基本IP配置 2.启动设备 3.测试连通性 4.配置RSTP基本功能: 华为交换机默认开启了MSTP生成树模式,所以我们修改生成树模式 ...
- NOIP 模拟 $32\; \rm Walker$
题解 \(by\;zj\varphi\) 发现当把 \(\rm scale×cos\theta,scale×sin\theta,dx,dy\) 当作变量时只有四个,两个方程就行. 当 \(\rm n\ ...
- Linux从头学08:Linux 是如何保护内核代码的?【从实模式到保护模式】
作 者:道哥,10+年的嵌入式开发老兵. 公众号:[IOT物联网小镇],专注于:C/C++.Linux操作系统.应用程序设计.物联网.单片机和嵌入式开发等领域. 公众号回复[书籍],获取 Linux. ...
- Windows下安装RocketMQ
目录 前言 环境 具体操作 下载 环境变量配置 启动 关闭 生产.消费实例 RocketMQ Console 前言 项目中用到了延迟消息队列,记录下一win10下rocketmq的安装 环境 win1 ...
- [转]C# 互操作性入门系列(三):平台调用中的数据封送处理
参考网址:https://www.cnblogs.com/FongLuo/p/4512738.html C#互操作系列文章: C# 互操作性入门系列(一):C#中互操作性介绍 C# 互操作性入门系列( ...
- QT中的对象模型――QPointer
QPointer是一个模板类,为QObject对象提供了守卫指针(Guarded Pointer).什么是守卫指针?守卫指针QPointer<T>类似于普通C++指针T *,有且仅有一点不 ...
- (三)air202连接阿里云上传静态数据
具体步骤跳转–合宙官网 air202luat二次开发设备接入阿里云(一) air202luat二次开发设备接入阿里云(二) air202luat二次开发设备接入阿里云(三) 可能遇到的问题 群文件中有 ...