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项目搭建成功
参考文档:
vue+webpack+npm搭建的纯前端项目的更多相关文章
- vue+webpack+VS Code入门简单的项目配置
为了方便,这边的编译器选择的是VS Code (Visual Studio Code); 打开VS Code,选择好自己的工作空间,然后新建一个文件夹作为我们项目的文件夹,然后,show time: ...
- webpack(零工程构建一个前端项目)详解
工作流程记录: 1.初始化项目:npm init -y 2.安装webpack,vue,vue-loader npm install webpack vue vue-loader 3.按装之后根据警告 ...
- 转载 VUE+WebPack环境搭建 https://segmentfault.com/a/1190000010960666
一.vue有两种使用方式: 1.下载vue.js <script src="vue.js"></script> 2.使用npm npm install vu ...
- VUE+webpack+npm项目中的RSA加解密
一.安装jsencrypt npm i jsencrypt node_modules文件夹中出现jsencrypt 二.引入jsencrypt 在main.js中import: import JsEn ...
- 基于Vue + webpack + Vue-cli 实现分环境打包项目
需求由来:我公司项目上线发布至服务器分为三个环境分别为测试环境.预发布环境.生产环境:前期做法是项目通过脚步打包时由脚步把域名和后缀名之类的全部替换成要发布的环境所需要的,因为我公司的项目比较大由许许 ...
- Vue Cli 3 搭建单页应用项目刷新 404 问题 解决方案(以Apache为例)
vue 项目 版本 Vue Cli 3.3 官方文档 https://router.vuejs.org/zh/guide/essentials/history-mode.html 因为本项目部署在 A ...
- windows环境下搭建vue+webpack的开发环境
前段时间一直在断断续续的看vue的官方文档,后来就慢慢的学习搭建vue的开发环境,已经有将近两周了,每到最后一步的时候就会报错,搞的我好郁闷,搁置了好几天,今天又接着搞vue的开发环境,终于成功了.我 ...
- [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍
一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...
- Angular02 通过angular-cli来搭建web前端项目
利用angular-cli的常见命令: npm i --save 包名 -> 软件依赖 npm i --save-dev 包名 -> 开发依赖 ng new 项 ...
随机推荐
- 【手势交互】8. Nimble Sense
早在2012.2013年度,手势识别领域就发生了几起重要的行业并购.比方英特尔对Omek的收购,谷歌对Flutter的收购.而苹果公司更是以3.45亿美金得高价收购了之前为微软Kinect提供技术支持 ...
- MySQLi 和 PDO 连接 MySQL
PHP 连接 MySQL PHP 5 及以上版本建议使用以下方式连接 MySQL : MySQLi extension ("i" 意为 improved) PDO (PHP Dat ...
- hdu1162
#include<cstdio> #include<cmath> #include<climits> #include<algorithm> #defi ...
- 【bzoj4385】[POI2015]Wilcze doły
单调队列扫描,记录当前区间长度为d的一段的和的最大值,和当前区间和. #include<algorithm> #include<iostream> #include<cs ...
- 编译自己的gcc
1 编译gcc需要的依赖 gmp mpfr mpc isl binutils 将它们都安装在同一个目录下即可. 2 --disable-nls 将native language support关掉,只 ...
- 下载的php_yal.dll文件添加到php的ext
下载的php_yal.dll文件添加到php的ext http://pecl.php.net/package/yaf/3.0.6/windows yaf. use_namespace=1 ;;exte ...
- ios33--线程安全
// // ViewController.m // 05-掌握-线程安全 // // 多线程下载文件:每个线程下的部分可能是交错的,到时候就拼接不了.除非每个线程下载的不是交错的,而是从头到尾依次分开 ...
- HDU 5832A water problem
大数 判断整除 /* *********************************************** Author :guanjun Created Time :2016/8/14 1 ...
- CPU上电时序详细分析
首先是RTC电源,这部分电力是永远不关闭的,除非电池(纽扣电池)没电并且没接任何外部电源(比如电池和电源适配器). RTC用以保持机器内部时钟的运转和保证CMOS配置信息在断电的情况下不丢失:其次,在 ...
- git log 常用选项
git log 常用选项 -p 按补丁格式显示每个更新之间的差异. jiqing@Ubuntu:/home/wwwroot/default/5hao/sheep$ git log -p commit ...