前提:
1.  借助Node.js环境里的npm来安装,

2.  设置好npm镜像,

(比如淘宝的npm镜像:输入

引用
npm install -g cnpm –registry=https://registry.npm.taobao.org



即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了 ),

==============或 者============

(配置指向源,通过 npm 命令指定下载源)

引用
npm config set registry http://registry.cnpmjs.org





3.  安装完webpack。

引用
npm install webpack -g

4.  安装完vue脚手架。

安装脚手架的步骤看这里

(已经进入项目文件夹的路径 或者是 磁盘根目录)

开始安装全局vue-cli脚手架,这个工具能帮我们搭建好我们需要的模板框架,比较简单。

引用
cnpm install -g vue-cli

等待下载。

下载完成后,在命令行中输入vue,验证是否安装成功,如果出来vue的信息说明安装成功

=======================

安装完以后,开始创建新项目:会创建新的文件夹

PS:项目文件夹的名字不能用驼峰命名,要用短横线拼接

引用
vue init webpack my-vue(项目文件夹的名字)

有这个提示的话就等待它下载完成

选择默认的这个

不懂的话可以看这个

Vue.js 2.0 独立构建和运行时构建的区别 http://www.tuicool.com/articles/3iAfu2n


创建完成。

打开文件目录:(使用脚手架搭建的项目文件的结构)

因为各个模板间都是相互依赖的,所以要安装依赖,

(已经进入新建的项目文件的路径中。)在命令行输入

引用
cnpm install



,等待它安装,(可能有点久,可以先看看文件目录)


安装完以后你会发现在已经创建的项目结构里面会多出一个node_modules的文件夹,里面就是刚才安装的所有依赖。

build中配置了webpack的基本配置、开发环境配置、生产环境配置

config中配置了路径端口值等

node_modules为依赖的模块

src放置组件和入口文件

static放置静态资源文件

index.html文件入口

测试一下项目里面默认的app.vue(src目录里)模块能否跑起来,这是需要先安装一下服务器环境,在命令行中输入

引用
cnpm run dev

就会自动打开这个页面(地址栏是http://localhost:8080/#/  8080是端抠号)

监听事件

使用Webpack搭建Vue项目的更多相关文章

  1. webpack搭建vue项目开发环境【文档向学习】

    为何有这篇文章 各个社区已经有无数篇帖子介绍如何使用webpack搭建前端项目,但无论是出于学习webpack的目的还是为了解决工作实际需要都面临着一个现实问题,那就是版本更新.别人的帖子可能刚写好版 ...

  2. webpack搭建vue项目,实现脚手架功能

    本文基于node.js开发环境,安装完node之后新建项目,通过webpack配置,实现vue-cli脚手架功能 对于刚刚接触编程的人来说,最难的可能并不是学习一种新语法或者框架,而是编程思维,这种思 ...

  3. 使用webpack搭建vue项目中遇到的问题

    1:data数据文件经试验,需要放在生成的build文件夹中才能生效,但是应该把data文件夹先放在src中,然后如何定义config文件,让其复制过去? new CopyWebpackPlugin( ...

  4. webpack 搭建vue项目流程

    1.安装node 2.打开命令行输入  npm install -g vue-cli 3.vue init webpack-simple vue 4.各种确认(enter键) 5.npm instal ...

  5. webpack搭建vue项目

    链接:https://blog.csdn.net/qq_42181069/article/details/81137180 __dirname : 文件的绝对路径

  6. element-ui和npm、webpack、vue-cli搭建Vue项目

    一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN ...

  7. 用vue-cli来搭建vue项目和webpack

    vue-cli 用vue-cli来搭建vue项目 第一步:全局安装vue-cli sudo npm install vue-cli -g 第二步:初始化一个项目 vue init webpack-si ...

  8. 使用 webpack 手动搭建 vue 项目

    webpack 是一个前端工程化打包工具,对于前端工程师来说 webpack 是一项十分重要的技能.下面我们就通过搭建一个 vue 项目来学习使用 webpack 主要环境: node v14.15. ...

  9. 利用webpack构建vue项目

    快速搭建vue项目 一,确认自己有无搭建好node以及npm环境,这些是前提,具体安装方法可参考https://nodejs.org/en/. 二,开始构建项目. 第1步:新建一个文件夹,随意命名. ...

随机推荐

  1. web服务器压测工具siege、ab

    web服务器压测工具也挺多,这里只介绍我用过的这两种--siege(for linux).ab(for windows). 一.siege 1.简介: Siege是一款开源的压力测试工具,设计用于评估 ...

  2. Kingdom and its Cities - CF613D

    Meanwhile, the kingdom of K is getting ready for the marriage of the King's daughter. However, in or ...

  3. Android Service 生命周期

    Service概念及用途: Android中的服务,它与Activity不同,它是不能与用户交互的,不能自己启动的,运行在后台的程序,如果我们退出应用时,Service进程并没有结束,它仍然在后台运行 ...

  4. CF449C:Jzzhu and Apples——题解

    https://vjudge.net/problem/CodeForces-449C 题目大意:1-n编号的苹果两两一对,他们的最大公约数不为1,求这些对的最大匹配. ———————————————— ...

  5. 获得WebApi用Post方法获得新增数据的信息

    首先,要知道webApi的基本返回方式是HttpResponseMessage,post会在响应中返回添加的对象,以及添加对象的访问地址 如:在fiddler里测试的时候 然后,我们可以根据这一点在后 ...

  6. 任务调度 Quartz 学习(一) SimpleTrigger

    概述: 在实际开发过程中,会遇到很多任务调度的需求. 比如说:某网站要在每周一上午9点更新网站数据,并发邮件通知用户: 再比如某论坛需求:每隔半个小时生成精华文章的RSS文件,每天凌晨统计论坛用户的积 ...

  7. B树和TreeSet与TreeMap

    1. 此前二叉搜索树相关的内容我们均假设可以把整个数据结构存储在计算机的内存中,但是如果数据量过大时,必须把数据结构放在磁盘上,导致大O模型不在适用.目前计算机处理器每秒至少可以执行5亿条指令,磁盘访 ...

  8. 2017 济南综合班 Day 7

     a 两个指针L.R R开始指向恰好[R,n]有不超过k个逆序对的地方 随着L的右移,R指针只会右移 逆序对有2部分 1.L左侧与其他位置形成的逆序对 2.R右侧与其他位置形成的逆序对 用树状数组分别 ...

  9. 51Nod 1082 | 模拟

    Input示例 5 4 5 6 7 8 Output示例 30 55 91 91 155 模拟 #include "bits/stdc++.h" using namespace s ...

  10. HDU 5876 Sparse Graph BFS+set删点

    Problem Description In graph theory, the complement of a graph G is a graph H on the same vertices s ...