使用vue-cli创建vue项目
vue-cli是官方发布的vue.js项目脚手架工具,使用它可以快速创建vue项目,github地址:https://github.com/vuejs/vue-cli
1、安装vue-cli
//设置淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
//全局安装vue-cli
cnpm install -g vue-cli
安装完成后,使用vue-V查看是否安装成功
2、生成项目
1、进入项目目录,初始化一个项目
//以webpack模板初始化项目
vue init webpack myProject(自定义项目名称)
2、进入项目,安装依赖
cd myProject
cnpm install
3、启动项目
npm run dev
到这一步,浏览器上应该会显示带有vue图标的默认页面
如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用,需要修改一下配置文件
config>index.js
另外,可以将 build 的路径前缀修改为 ' ./ '(原本为 ' / '),是因为打包之后,外部引入 js 和 css 文件时,如果路径以 ' / ' 开头,在本地是无法找到对应文件的(服务器上没问题)。所以如果需要在本地打开打包后的文件,就得修改文件路径。
3、打包上线
自己的项目文件都放到 src 文件夹下
打包命令
npm run build
打包完成后,会生成 dist 文件夹
项目上线时,只需要将 dist 文件夹放到服务器就好了
使用vue-cli创建vue项目的更多相关文章
- vue cli创建typescript项目
使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...
- vue cli创建的项目 当你后期使用了ES6语法,如何解决浏览器兼容问题
最近开发了一个项目,开发过程中,由于需要使用了async await ,于是发现,只有少数的浏览器支持,极大多数的浏览器是不支持这玩意的,在网上各种找解决方案,基本都是失败,最后总结了两个方案之后,尝 ...
- 用vue ui创建的项目怎么关闭eslint校验
在Vue Cli的控制面板找到配置-ESLint configuration,然后关闭保存时检查就可以了
- Vue CLI及其vue.config.js(一)
有时候我们为了快速搭建一个vue的完整系统,经常会用到vue-cli,vue-cli用起来很方便而且命令简单容易上手,但缺点是在构建的时候我感觉有一些慢,因为CLI 服务 (@vue/cli-serv ...
- 解决@vue/cli 创建项目是安装chromedriver时失败的问题
最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...
- 用vue脚手架创建bootstrap-vue项目
用vue脚手架创建bootstrap-vue项目 框架的地址:https://bootstrap-vue.js.org/docs/ 第一步 vue init webpack demo第二步 cd de ...
- [Vue CLI 3] vue inspect 的源码设计实现
首先,请记住: 它在新版本的脚手架项目里面非常重要 它有什么用呢? inspect internal webpack config 能快速地在控制台看到对应生成的 webpack 配置对象. 首先它是 ...
- 用Angule Cli创建Angular项目
Angular4.0来了,更小,更快,改动少 接下来为Angular4.0准备环境和学会使用Angular cli项目 1.环境准备: 1)在开始工作之前我们必须设置好开发环境 如果你的机器上还没有安 ...
- Vue CLI 创建项目
使用命令创建VUE项目 运行以下命令[vue create [项目名]]来创建一个新项目: vue create hello-world 警告 如果你在 Windows 上通过 minTTY 使用 G ...
- 使用vue/cli 创建一个简单的项目
首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...
随机推荐
- git submodule 删除及更新URL 转载的
删除一个submodule 1.删除 .gitsubmodule中对应submodule的条目 2.删除 .git/config 中对应submodule的条目 3.执行 git rm --cache ...
- SQL SERVER-查询爆破sa密码的主机
drop table if exists #sql create table #sql ( Logdatae ), processinfo ), [text] varchar(max) ) go IN ...
- Python变量之白首如新,倾盖如故
python中的变量变量:将运算的中间结果暂存到内存中,方便后续程序调用.变量的命名规则:1.变量名由字母.数字.下划线组成.2.变量名可以用字母.下划线开头,但是不能以数字开头.3.变量名是区分大小 ...
- 【原】Java学习笔记022 - 字符串
package cn.temptation; public class Sample01 { public static void main(String[] args) { // 字符串 // 定义 ...
- jQuery 中的简单动画
制作动画常用方法: show("速度") 显示元素 hide("速度") 隐藏元素 toggle() 切换效果 例如下jQuery代 ...
- go语言学习-常用命令(四)
go常用命令 go get:获取远程包(得装git) go run:直接运行程序(写代码时调试用) go build:测试编译,检查是否有编译错误 go fmt:格式化代码(一般不咋用,IDE都自带了 ...
- 一致性哈希算法----nginx负载均衡器配置之一
一直性Hash算法在很多场景下都有应用,尤其是在分布式缓存系统中,经常用其来进行缓存的访问的负载均衡,比如:redis等<k,v>非关系数据库作为缓存系统.我们首先来看一下采用取模方式进行 ...
- python + PyQt5 实现 简易计算器
忽然想起之前一直想写个简单的计算器,今天就写了一下,界面有些简陋,但是基本功能实现没有问题 以下是源码: # --*-- coding:utf-8 --*-- import sys from PyQt ...
- .NET CORE学习笔记系列(2)——依赖注入[7]: .NET Core DI框架[服务注册]
原文https://www.cnblogs.com/artech/p/net-core-di-07.html 包含服务注册信息的IServiceCollection对象最终被用来创建作为DI容器的IS ...
- macos 下usb键盘问题.
Mac 与PC键盘的对比及快捷键(黑苹果) https://www.jianshu.com/p/240f31f6f81a 剩下的就是 系统偏好设置 - 键盘 - 修饰键 - USB键盘(目标键盘) 把 ...