一、安装node.js

去官网下载安装node.js:    https://nodejs.org/en/

安装完成后,可以在命令行工具(Windows是cmd,苹果是终端控制)输入node -v 和 npm -v,如果能显示出版本号,就说明安装成功。

二、安装vue-cli

参考vue官网(命令行工具)

安装完成后,可以使用 vue -V (注意 V 大写)查看是否安装成功。

如果提示“无法识别 'vue' ” ,有可能是 npm 版本过低,可以使用 npm install -g npm 来更新版本

三、安装webpack

参考菜鸟教程:https://www.runoob.com/w3cnote/webpack-tutorial.html

四、生成项目

首先进入项目目录,从项目目录中打开命令行工具,输入:

vue init webpack your-Project-Name

其中 webpack 是模板名称,可以到 vue.js 的 GitHub 上查看更多的模板https://github.com/vuejs-templates

your-Project-Name是自定义的项目名称,命令执行之后,会在当前目录生成一个以该名称命名的项目文件夹 是自定义的项目名称,命令执行之后,会在当前目录生成一个以该名称命名的项目文件夹

命令行会出来很多需要输入信息,项目名称,项目描述等,这些自行填写,不重要。

配置完成后,可以看到目录下多出了一个项目文件夹,里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目

安装依赖:

npm install
启动项目:
npm run dev

修改端口:config>index.js

四、打包上线

自己的项目文件都需要放到 src 文件夹下

项目开发完成之后,可以输入 npm run build 来进行打包工作

npm run build

打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看

项目上线时,只需要将 dist 文件夹放到服务器就行了。

文章参考链接:http://www.cnblogs.com/wisewrong/p/6255817.html

vue(一)使用vue-cli搭建项目的更多相关文章

  1. vue cli搭建项目及文件引入

    cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载 ...

  2. vue cli搭建项目

    1.首先电脑要在安装node环境下才能运行 2.全局安装webpack:npm install webpack -g 3.安装vue脚手架: npm install vue-cli -g 4.新建文件 ...

  3. 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目

    首先,默认咱们已经有了.net core 3.1的开发环境,如果你没有,快去下载... https://dotnet.microsoft.com/download 由于项目是基于abp vNext开发 ...

  4. mvn cli 搭建项目架构

    创建如图所示目录结构 在system-parent创建如下目录 ├─system-dao ├─system-domain ├─system-service └─system-web 创建system- ...

  5. Spring Boot +Vue 项目实战笔记(一):使用 CLI 搭建 Vue.js 项目

    前言 从这篇文章开始,就进入真正的实践了. 在前端项目开发中,我们可以根据实际情况不同程度地使用 Vue.利用 Vue CLI(或写成 vue-cli,即 Vue 脚手架)搭建出来的项目,是最能体现 ...

  6. 使用@vue/cli搭建vue项目开发环境

    当前系统版本 mac OS 10.14.2 1.安装node.js开发环境 前端开发框架和环境都是需要 Node.js  vue的运行是要依赖于node的npm的管理工具来实现 <mac OS ...

  7. Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli vue ...

  8. 不使用 vue-cli 与 vue 模版,使用 Vue2.x + webpack4.x 从零开始一步步搭建项目框架

    说明 这是我根据慕课网上的一个课程 Vue+Webpack打造todo应用 过程一步步搭下来的框架,去掉了业务相关的逻辑. 项目最终的效果包括了引入vue框架:使用CSS预处理器:使用babel:引用 ...

  9. 搭建项目vue + vue-router + vuex + vue-i18n + element-ui + egg + sequelize

    vue + vue-router + vuex + vue-i18n + element-ui + egg + sequelize https://www.cnblogs.com/wuguanglin ...

  10. vue搭建项目

    vue-cli 作用:快速搭建项目脚手架 安装3.0:npm i -g @vue/cli 安装桥接工具:npm i -g @vue/cli-init (vue-cli 3和旧版使用相同的命令,所以2被 ...

随机推荐

  1. Akka-CQRS(1)- Write-side, Persisting event sources:CQRS存写端操作方式

    上篇我们提到CQRS是一种读写分离式高并发.大流量数据录入体系,其中存写部分是通过event-sourcing+akka-persistence实现的.也可以这样理解:event-sourcing(事 ...

  2. 4.TableLayout、回调接口

    会话详情页 listview条目布局 列,当第0列的内容过多时,不至于将其他列的内容,挤出屏幕 --> <TableLayout android:id="@+id/tl_rece ...

  3. Java与Python比较心得01

    Java 可以int + 字符串(str)输出,python则只可以用逗号 , 连接,或者字符串 + 字符串或int + int否则python会报错如下图:

  4. Java Web 开发中的中文乱码与解决方式

    乱码产生的原因 不管是request乱码还是response乱码,其实都是由于客户端(浏览器)跟服务器端采用的编码格式不一致造成的.以request乱码为例:浏览器向服务器发送请求,因为浏览器与服务器 ...

  5. Kubenetes---Service--实践

    1,编写创建svc的yaml文件 2,  创建service 3, 查看 4,查看svc代理那些pod , 当前没有 先创建deployment --> service 查看pod的label信 ...

  6. Kubernetes集群搭建之Master配置篇

    本次系列使用的所需部署包版本都使用的目前最新的或最新稳定版,安装包地址请到公众号内回复[K8s实战]获取 今天终于到正题了~~ 生成kubernets证书与私钥 1. 制作kubernetes ca证 ...

  7. JavaScript优化细节(一)

    1.置空Closure(闭包)引起的Memory leak滞留的Object和domain 2.用fragment实现append大量元素 var f= document.createDocument ...

  8. IntelliJ IDEA 代码字体大小的快捷键设置放大缩小(很实用)(图文详解)

    不多说,直接上干货!  这是在设置IntelliJ IDEA 代码字体的快捷键设置缩小: 怎么达到的了,就是ctrl + 你的鼠标滑扭往下  这是在设置IntelliJ IDEA 代码字体的快捷键设置 ...

  9. [Jenkins][Git]ssh原理以及与https的区别

    -------------------------------------------------------------------- 本文参考多篇文章结合自身情况完成,可自由转载,需保留本文出处! ...

  10. 【Android基础】Fragment 详解之Fragment生命周期

    上一篇文章简单介绍了一下Fragment,这一篇文章会详细的说一下Fragment的生命周期和创建一个用户界面. Fragment的主要功能就是创建一个View,并且有一个生命周期来管理这个View的 ...