使用Webpack搭建Vue项目
前提:
1. 借助Node.js环境里的npm来安装,
2. 设置好npm镜像,
(比如淘宝的npm镜像:输入
即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了 ),
==============或 者============
(配置指向源,通过 npm 命令指定下载源)
3. 安装完webpack。
4. 安装完vue脚手架。
安装脚手架的步骤看这里
(已经进入项目文件夹的路径 或者是 磁盘根目录)
开始安装全局vue-cli脚手架,这个工具能帮我们搭建好我们需要的模板框架,比较简单。
等待下载。
下载完成后,在命令行中输入vue,验证是否安装成功,如果出来vue的信息说明安装成功
=======================
安装完以后,开始创建新项目:会创建新的文件夹
PS:项目文件夹的名字不能用驼峰命名,要用短横线拼接
有这个提示的话就等待它下载完成
选择默认的这个
不懂的话可以看这个
Vue.js 2.0 独立构建和运行时构建的区别 http://www.tuicool.com/articles/3iAfu2n
创建完成。
打开文件目录:(使用脚手架搭建的项目文件的结构)
因为各个模板间都是相互依赖的,所以要安装依赖,
(已经进入新建的项目文件的路径中。)在命令行输入
,等待它安装,(可能有点久,可以先看看文件目录)
安装完以后你会发现在已经创建的项目结构里面会多出一个node_modules的文件夹,里面就是刚才安装的所有依赖。
build中配置了webpack的基本配置、开发环境配置、生产环境配置
config中配置了路径端口值等
node_modules为依赖的模块
src放置组件和入口文件
static放置静态资源文件
index.html文件入口
测试一下项目里面默认的app.vue(src目录里)模块能否跑起来,这是需要先安装一下服务器环境,在命令行中输入
就会自动打开这个页面(地址栏是http://localhost:8080/#/ 8080是端抠号)
监听事件
使用Webpack搭建Vue项目的更多相关文章
- webpack搭建vue项目开发环境【文档向学习】
为何有这篇文章 各个社区已经有无数篇帖子介绍如何使用webpack搭建前端项目,但无论是出于学习webpack的目的还是为了解决工作实际需要都面临着一个现实问题,那就是版本更新.别人的帖子可能刚写好版 ...
- webpack搭建vue项目,实现脚手架功能
本文基于node.js开发环境,安装完node之后新建项目,通过webpack配置,实现vue-cli脚手架功能 对于刚刚接触编程的人来说,最难的可能并不是学习一种新语法或者框架,而是编程思维,这种思 ...
- 使用webpack搭建vue项目中遇到的问题
1:data数据文件经试验,需要放在生成的build文件夹中才能生效,但是应该把data文件夹先放在src中,然后如何定义config文件,让其复制过去? new CopyWebpackPlugin( ...
- webpack 搭建vue项目流程
1.安装node 2.打开命令行输入 npm install -g vue-cli 3.vue init webpack-simple vue 4.各种确认(enter键) 5.npm instal ...
- webpack搭建vue项目
链接:https://blog.csdn.net/qq_42181069/article/details/81137180 __dirname : 文件的绝对路径
- element-ui和npm、webpack、vue-cli搭建Vue项目
一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN ...
- 用vue-cli来搭建vue项目和webpack
vue-cli 用vue-cli来搭建vue项目 第一步:全局安装vue-cli sudo npm install vue-cli -g 第二步:初始化一个项目 vue init webpack-si ...
- 使用 webpack 手动搭建 vue 项目
webpack 是一个前端工程化打包工具,对于前端工程师来说 webpack 是一项十分重要的技能.下面我们就通过搭建一个 vue 项目来学习使用 webpack 主要环境: node v14.15. ...
- 利用webpack构建vue项目
快速搭建vue项目 一,确认自己有无搭建好node以及npm环境,这些是前提,具体安装方法可参考https://nodejs.org/en/. 二,开始构建项目. 第1步:新建一个文件夹,随意命名. ...
随机推荐
- [LOJ2540] [PKUWC2018] 随机算法
题目链接 LOJ:https://loj.ac/problem/2540 Solution 写的时候脑子不太清醒码了好长然后时间\(LOJ\)垫底... 反正随便状压\(dp\)一下就好了,设\(f[ ...
- [洛谷P5075][JSOI2012]分零食
题目大意:有$m(m\leqslant10^8)$个人站成一排,有$n(n\leqslant10^4)$个糖果,若第$i$个人没有糖果,那么第$i+1$个人也没有糖果.一个人有$x$个糖果会获得快乐值 ...
- BZOJ1229 & 洛谷2917:[USACO2008 NOV]toy 玩具 & 洛谷4480:[BJWC2018]餐巾计划问题——题解
标题很长emmm…… [USACO2008 NOV]toy 玩具 https://www.luogu.org/problemnew/show/P2917 https://www.lydsy.com/J ...
- bzoj Usaco补完计划(优先级 Gold>Silver>资格赛)
听说KPM初二暑假就补完了啊%%% 先刷Gold再刷Silver(因为目测没那么多时间刷Silver,方便以后TJ2333(雾 按AC数降序刷 ---------------------------- ...
- 分享一个JQuery弹出层插件
JQuery插件TipsWindown 1.1 一个基于jQuery的弹出层.支持拖拽,支持内容为文字,图片,URL等!至于兼容性.在IE6下,弹出对像无法绝对固定.其他应该没啥大问题: 最新更新:( ...
- Spring中@Resource与@Autowired、@Qualifier的用法与区别(转)
1.@Autowired与@Resource都可以用来装配bean. 都可以写在字段上,或写在setter方法上. 2.@Autowired默认按类型装配(这个注解是属业spring的),默认情况下必 ...
- BZOJ1878: [SDOI2009]HH的项链 (离线查询+树状数组)
1878: [SDOI2009]HH的项链 题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1878 Description: HH有一串由 ...
- HDU 3507斜率优化dp
Print Article Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others)To ...
- 阿里C++研发实习二面和三面面经
下午连着面了阿里爸爸的二面和三面,非常不明白别人的三面都是hr了,为什么我还是在技术面,难道面了个假阿里.不管怎么样,来篇面经攒攒人品. 二面 第一次遇到这么严肃的面试官,居然可以全程无表情的,面了这 ...
- [USACO Mar08] 牛跑步
http://www.cogs.pro/cogs/problem/problem.php?pid=133 ★★★ 输入文件:cowjog.in 输出文件:cowjog.out 简单对比时间 ...