(一):*安装 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的安装的更多相关文章

  1. vue cli的安装与使用

    一.简介 vue作为前端开发的热门工具,受到前端开发人员的喜爱.为了简化项目的构建,采用vue cli来简化开发. vue cli是一个全局安装的npm包,提供了终端使用的命令.vue create可 ...

  2. Vue CLI 介绍安装

    https://cli.vuejs.org/zh/guide/ 介绍 警告 这份文档是对应 @vue/cli 3.x 版本的.老版本的 vue-cli 文档请移步这里. Vue CLI 是一个基于 V ...

  3. Vue Cli安装以及使用

      因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...

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

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

  5. [转]Vue CLI 3搭建vue+vuex 最全分析

    原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...

  6. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

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

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

  8. Vue CLI 3搭建vue+vuex 最全分析

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...

  9. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  10. 基于vue cli 3.0创建前端项目并安装cube-ui

    前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...

随机推荐

  1. 分享我的CleanArchitecture for Razor Page项目模板

    这个项目是参考和整合了jasontaylordev/CleanArchitecture 和 blazorhero/CleanArchitecture 代码基础上,重构出来的新的项目,这两个项目都是非常 ...

  2. .Net Core+分布式配置中心(AgileConfig)

    GitHub上AgileConfig非常详细,以下只是本人学习过程的整理 一.介绍 1.参考地址 https://github.com/dotnetcore/AgileConfig https://w ...

  3. git的基本操作命令与基础

    本文针对window用户进行git操作 1.git是分布式版本控制系统,需要用户名和邮箱作为一个标识.在任何文件夹中点击右键,选择Git Bash Here ,配置全局用户名和邮件或者局部用户名和邮件 ...

  4. sqli-labs lesson 21-22

    less 21: username:admin password:admin 登录. 发现这里和之前不太一样.用到了base64加密而不是之前的明文了. 传送门:base64在线编码解码 所以要做的就 ...

  5. ☕【Java技术指南】「Guava Collections」实战使用相关Guava不一般的集合框架

    Google Guava Collections 使用介绍 简介 Google Guava Collections 是一个对 Java Collections Framework 增强和扩展的一个开源 ...

  6. Python 赋值、浅拷贝、深拷贝之间区别

    赋值 不会开辟新的内存空间,是对原对象值的引用 当原对象值,改变后,赋值的变量也会随之改变 浅拷贝 只会拷贝最外层的对象,会开辟新的内存空间,和原对象是互相独立的 如果这个对象有嵌套对象的话,浅拷贝只 ...

  7. 题解 UVA10225 Discrete Logging

    本题是一道 \(BSGS\) 裸题,用于求解高次同余方程,形如 \(a^x\equiv b(\mod p)\),其中 \(a\),\(p\) 互质(不互质还有 \(EXBSGS\)). 建议多使用 \ ...

  8. 快速解决flutter中package包版本冲突问题

    当你的项目需要安装的依赖包越多,遇到包冲突可能性就越大,尤其是当依赖的包有重大更新时.比如下图: 上面可以看到是xml跟intl_translation两个包有冲突,因为他们依赖两个不同的petitp ...

  9. Json序列化更新好友列表

    一.概述 使用Newtonsoft.Json开源库进行序列化 二.代码 using Newtonsoft.Json; using System; using System.Collections.Ge ...

  10. Java finally语句到底是在return之前还是之后执行

    看过网上关于Java中异常捕获机制try-catch-finally块中的finally语句是不是一定会被执行的讨论也有很多. 首先明确一点,下面两种情况finally肯定是不执行的: 1). ret ...