前提:
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. [LOJ2540] [PKUWC2018] 随机算法

    题目链接 LOJ:https://loj.ac/problem/2540 Solution 写的时候脑子不太清醒码了好长然后时间\(LOJ\)垫底... 反正随便状压\(dp\)一下就好了,设\(f[ ...

  2. [洛谷P5075][JSOI2012]分零食

    题目大意:有$m(m\leqslant10^8)$个人站成一排,有$n(n\leqslant10^4)$个糖果,若第$i$个人没有糖果,那么第$i+1$个人也没有糖果.一个人有$x$个糖果会获得快乐值 ...

  3. BZOJ1229 & 洛谷2917:[USACO2008 NOV]toy 玩具 & 洛谷4480:[BJWC2018]餐巾计划问题——题解

    标题很长emmm…… [USACO2008 NOV]toy 玩具 https://www.luogu.org/problemnew/show/P2917 https://www.lydsy.com/J ...

  4. bzoj Usaco补完计划(优先级 Gold>Silver>资格赛)

    听说KPM初二暑假就补完了啊%%% 先刷Gold再刷Silver(因为目测没那么多时间刷Silver,方便以后TJ2333(雾 按AC数降序刷 ---------------------------- ...

  5. 分享一个JQuery弹出层插件

    JQuery插件TipsWindown 1.1 一个基于jQuery的弹出层.支持拖拽,支持内容为文字,图片,URL等!至于兼容性.在IE6下,弹出对像无法绝对固定.其他应该没啥大问题: 最新更新:( ...

  6. Spring中@Resource与@Autowired、@Qualifier的用法与区别(转)

    1.@Autowired与@Resource都可以用来装配bean. 都可以写在字段上,或写在setter方法上. 2.@Autowired默认按类型装配(这个注解是属业spring的),默认情况下必 ...

  7. BZOJ1878: [SDOI2009]HH的项链 (离线查询+树状数组)

    1878: [SDOI2009]HH的项链 题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1878 Description: HH有一串由 ...

  8. HDU 3507斜率优化dp

    Print Article Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others)To ...

  9. 阿里C++研发实习二面和三面面经

    下午连着面了阿里爸爸的二面和三面,非常不明白别人的三面都是hr了,为什么我还是在技术面,难道面了个假阿里.不管怎么样,来篇面经攒攒人品. 二面 第一次遇到这么严肃的面试官,居然可以全程无表情的,面了这 ...

  10. [USACO Mar08] 牛跑步

    http://www.cogs.pro/cogs/problem/problem.php?pid=133 ★★★   输入文件:cowjog.in   输出文件:cowjog.out   简单对比时间 ...