现在开始安装环境

一.安装node.js

首先要安装node.js,去nodejs官网下载即可,地址:http://nodejs.cn/中文网。

安装完成后,打开终端(windows键+R)搜索cmd,输入命令行node -v 和 npm -v,如果能显示出版本号,就说明安装成功。

二.安装vue-cli

输入命令:npm install -g vue-cli

三.在桌面新建文件夹,并进入文件夹(回顾一下用命令来操作)

四.准备工作做好,开始正式的搭建项目

输入命令:vue init webpack demo 回车

这是你就看到你桌面新建的vue文件夹里边就多了一个demo文件夹

还有一种新建项目的方法vue init webpack-simple demo 回车(这个搭建的项目比较简单,适合我们平时学习用)

五.按照上面的命令进行操作

输入cd demo 回车,再npm install回车,你会发现文件夹中多了一个项目文件夹

启动项目,输入命令:npm run dev

这时候你会发现一个端口为8080的项目就搭建完成了,如果浏览器没有出现那说明8080这个端口已经被占用了,那么需要修改一下配置文件 config>index.js。

在此启动,端口为8088

然后我们可以自己需要找到app.vue文件,进行代码更改

后期我们写的文件都要放到src里边,以.vue为后缀

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

是不是你也搭建成功了呢,很有意思吧,加油,我们一起深入vue!

快速搞定用Vue+Webpack搭建前端项目(学习好久了,该写点东西了......)的更多相关文章

  1. vue 快速入门 系列 —— 使用 vue-cli 3 搭建一个项目(上)

    其他章节请看: vue 快速入门 系列 使用 vue-cli 3 搭建一个项目(上) 前面我们已经学习了一个成熟的脚手架(vue-cli),笔者希望通过这个脚手架快速搭建系统(或项目).而展开搭建最好 ...

  2. vue 快速入门 系列 —— 使用 vue-cli 3 搭建一个项目(下)

    其他章节请看: vue 快速入门 系列 使用 vue-cli 3 搭建一个项目(下) 上篇 我们已经成功引入 element-ui.axios.mock.iconfont.nprogress,本篇继续 ...

  3. 手把手教你制作微信小程序,开源、免费、快速搞定

    最近做了个"罗孚传车"的小程序 一时兴起,做了一个小程序,将个人收集的同汽车相关的行业资讯和学习资料,分享到小程序中,既作为历史资料保存,又提供给更多的人学习和了解,还能装一下:) ...

  4. [坑况]——webpack搭建前端环境踩过的坑啊

    前言 嘿哈,webpack搭建前端环境踩过的坑啊! 第一个:完全不知所措 webpack4 下面用不了HtmlWebpackPlugin 和 ExtractTextPlugin 解决方案: html- ...

  5. 分分钟轻松搞定IBM系列 RAID5搭建

    分分钟轻松搞定IBM系列 RAID5搭建 按照 以下图片步骤一步步可轻松完成IBM服务器RAID1.5.10等的搭建. 此例是以RAID5为例,RAID1和10可举一反三.

  6. 使用webpack搭建react项目 webpack-react-project

    webpack-react-project 使用webpack搭建react项目 webpack搭建react项目 github源码 具体配置信息参照package.json和webpack.conf ...

  7. Win环境下安装vue及运行vue开发的前端项目

    vue安装及配置 首先下载node.js要求版本在8.9以上        官网:https://nodejs.org/zh-cn/ 下载完可检查在windows任务命令行里输入node -v 使用淘 ...

  8. 使用vue2.x+webpack+vuex+sass+axios+elementUI等快速搭建前端项目框架

    一.本文将分享如何快速搭起基于webpack+vue的前端项目框架,利用vue的自己的脚手架工具vue-cli搭建起基本的环境配置,再通过npm包管理工具引入相应的依赖来完善项目的各种依赖框架.下面是 ...

  9. webpack搭建前端一条龙服务

    作为从grunt.gulp一路走来的老码农,一开始用webpack的时候我是很抗拒的.但由于核心库使用了vue,而webpack又是vue的最佳拍档(vue作者专门为其写了vue-loader),所以 ...

随机推荐

  1. Spring框架——批处理(batch)和事务(Transaction)

    批处理(batch) 批处理(batch)------------>好比快递员[不能一件一件的送快递] - 批处理指的是一次操作中执行多条SQL语句 - 批处理相比于一次一次执行效率会提高很多 ...

  2. TensorFlow框架(4)之CNN卷积神经网络

    1. 卷积神经网络 1.1 多层前馈神经网络 多层前馈神经网络是指在多层的神经网络中,每层神经元与下一层神经元完全互连,神经元之间不存在同层连接,也不存在跨层连接的情况,如图 11所示. 图 11 对 ...

  3. 转每天一个linux命令(2):cd命令

      Linux cd 命令可以说是Linux中最基本的命令语句,其他的命令语句要进行操作,都是建立在使用 cd 命令上的. 所以,学习Linux 常用命令,首先就要学好 cd 命令的使用方法技巧. 1 ...

  4. css关键字unset

    今天遇到了一个css属性 display:unset 以为是新增的display的属性值,查了好久,发现并没有这个属性值, 后来发现了unset是css的关键字,将一个属性的属性值设置为unset,目 ...

  5. 常用bash命令

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 } p. ...

  6. 自己动手写fullPage插件

    仿造fullPage.js https://alvarotrigo.com/fullPage/#firstPage 自己参照网上教程写了一个,加了注释.主要是练习造轮子的能力,需求是不断变化的只拿来用 ...

  7. wowza拉流和推流接口备忘

    拉流接口地址:https://www.wowza.com/docs/stream-management-query-examples# 推流接口地址:https://www.wowza.com/doc ...

  8. 【转义字符】HTML 字符实体< &gt: &

    在开发中遇到javascript从后台获取的url 会被转义,如:http://localhost:8080/Home/Index?a=14&b=15&c=123,想把它转成http: ...

  9. Java 多线程(四) 多线程访问成员变量与局部变量

    先看一个程序例子: public class HelloThreadTest { public static void main(String[] args) { HelloThread r = ne ...

  10. NullpointerException处理

    毫无疑问,空指针NullpointerException是我们最常遇到异常,没有之一! 在刚进入编程职业时,我想,大部分刚进入的同学肯定会受到前辈们的叮咛:一定要防止空指针,这是个低级错误.你们不是? ...