vue+webpack+npm搭建的纯前端项目
转载来源:https://www.cnblogs.com/shenyf/p/8341641.html
搭建node环境
下载
1.进入node.js官方网站下载页,点击下图中框出位置,进行下载即可,当前版本为8.9.4,下载网址为:https://nodejs.org/zh-cn/download/
2.至于什么是LTS,请参考该知乎问题:https://www.zhihu.com/question/35512237,总之LTS意味着更加稳定,因此此处选择安装该版本,具体请依照自身需求。
安装
1.安装十分简单,只需双击刚下载完成的node-v8.9.4-x64.msi文件,期间可以更换安装路径,其余只需点击下一步直至安装完成即可,
2.如下图所示,则表示安装成功。
测试
1.安装完成则自动安装好了npm这个包,并且自动将路径配置到系统路径中,使用windows+R快捷键,输入cmd,即打开命令提示符窗口,通过如下命令查看是否安装成功;
node -v --查看当前node版本
npm -v --查看当前npm版本
2.得到如下图所示,则表示安装成功。
安装cnpm
1.由于使用npm工具会自动去查找国外的网站下载包,可能会被防火墙屏蔽导致下载失败,因此我们需要安装cnmp淘宝镜像来代替npm,使用cnpm下载包会大大提高下载速率;
2.安装方式,在命令提示符窗口,输入如下命令,等待1至2分钟即可
npm install cnpm -g --安装cnpm,-g代表全局
3.使用如下命令查看cnpm是否安装成功
cnpm -v --查看当前cnpm版本
4.如下图所示,则表示cnpm安装成功。
安装webpack
1.至于为什么要安装webpack,可以参考这篇博客:https://www.cnblogs.com/-walker/p/6056529.html,或者参考webpack中文官方文档:https://doc.webpack-china.org/
npm run dev
2.安装webpack只需要一条命令即可
npm install webpack -g --全局安装webpack
3.使用如下命令查看是否安装成功
webpack -v
4.如下图所示,则说明安装成功
安装vue-cli
1.安装vue-cli同样只需要一条命令即可
npm install vue-cli -g --全局安装vue-cli
2.具体方式,同上,这里不再做详细叙述。
正式开始一个vue项目
1.下面准备在D盘目录下的WebstormProjects下创建一个vue项目
2.首先按照下图中所示方式进入到当前目录下的cmd窗口
3.在Cmd命令窗口输入如下命令,新建一个vue项目
vue init webpack my-project
4.在建立vue项目中主要需要输入如下信息
Project name my-project --项目的名称,直接默认回车
Project description A Vue.js project --项目描述,直接默认回车
Author syf --作者姓名,输入名字(syf)回车
Install vue-router? Yes --是否安装路由,输入y回车
Use ESLint to lint your code? No --是否用ESLint规范代码,输入n回车
Set up unit tests No --是否需要单元测试,输入n回车
Setup e2e tests with Nightwatch? No --是否需要单元测试,输入n回车
5.进入到my-project文件夹下
cd my-project
6.安装依赖
cnpm install
7.启动项目
npm run dev
8.具体过程如下所示
9.使用浏览器访问上图中的网址,得到如下图所示结果,表示一个vue项目搭建成功
参考文档:
最新文章
- 汇编语言进阶和Makefile进阶---第二天
- 关于SQL递归查询在不同数据库中的实现方法
- HAXM VT-X (与Hype-V冲突)
- Leetcode Find Minimum in Rotated Sorted Array I and II
- Objective-C学习笔记之block
- wireshark使用笔记
- Web消息主体风格(Message Body Style)
- bzoj1588 [HNOI2002]营业额统计(Treap)
- (转)用JS判断ckeditor3.6版本编辑器内容为空的方法
- Cloning Java objects using serialization
- MVC-01 概述
- 自己动手系列——实现一个简单的ArrayList
- Unity3D-Shader-人物残影效果
- Linq 巧用 Max,Sum
- QT文件操作
- 微信小程序数组对象
- oracle单行函数 之 数字函数
- Python编码——常见的编码设置
- 高德地图API获取天气
- 如何在html中插入图片
热门文章
- Mac OS X 10.10下Versions crash的问题
- 【Android】自己定义View
- ffmpeg-linux32-v3.3.1
- 一张图轻松记住PHP的*类*以及private和protected的区别
- Codeforces Round #311 (Div. 2)C. Arthur and Table
- SQLAlchemy框架---ORM思想
- 洛谷 P1969 积木大赛 —— 水题
- Maven package打包webapp项目遇到的问题
- bzoj 1045: [HAOI2008] 糖果传递【瞎搞】
- 思维题 HDOJ 5288 OO’s Sequence