搭建环境

搭建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项目搭建成功


参考文档:

1.VUE官方文档:https://cn.vuejs.org/

转载:https://www.cnblogs.com/shenyf/p/8341641.html

搭建一个VUE项目的更多相关文章

  1. vue-用Vue-cli从零开始搭建一个Vue项目

    Vue是近两年来比较火的一个前端框架(渐进式框架吧). Vue两大核心思想:组件化和数据驱动.组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用:数据驱动是前端的未来发展方向,释放了对 ...

  2. 完整搭建一个vue项目

    目录 一. 搭建一个vue项目的完整步骤 二. 卸载vue-cli 三. 完全卸载webpack 一. 搭建一个vue项目的完整步骤 1.安装node.js 下载地址 # 检查是否安装成功 node ...

  3. 如何搭建一个VUE项目

    搭建环境 搭建node环境 下载 1.进入node.js官方网站下载页,点击下图中框出位置,进行下载即可,当前版本为8.9.4,下载网址为:https://nodejs.org/zh-cn/downl ...

  4. 如何搭建一个vue项目(完整步骤)

    参考资料 一.安装node环境 1.下载地址为:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3.为了提高我们的效率,可以使用淘宝的 ...

  5. 从零开始使用vue-cli搭建一个vue项目及注意事项

    一.安装node.js 1.根据电脑的自行下载node.js安装包http://nodejs.cn 2.点击安装,按照正常的的一路点击下去 3.验证安装是否成功,按键win+r,输入cmd打开命令行工 ...

  6. 如何利用webpack4.0搭建一个vue项目

    作为一个初学者,记录自己踩过的坑是个好的习惯.我本身比较懒,这里刚好有时间把自己的搭建过程记录一下这里是参考文章   https://www.jianshu.com/p/1fc5b5151abf文章里 ...

  7. 使用Vue脚手架(vue-cli)从零搭建一个vue项目(包含vue项目结构展示)

    注:在搭建项目之前,请先安装一些全局的工具(如:node,vue-cli等) node安装:去node官网(https://nodejs.org/en/)下载并安装node即可,安装node以后就可以 ...

  8. 用脚手架搭建一个 vue 项目

    一.需要安装 node 环境 下载地址: https://nodejs.org/en/ 中文网: http://nodejs.cn/ 安装后为方便国内使用,可以把 npm 换成 taobao 的 cn ...

  9. VUE系列一:VUE入门:搭建脚手架CLI(新建自己的一个VUE项目)

    一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分 ...

随机推荐

  1. Linux-flock文件锁的使用

    在多个进程同时操作同一份文件的过程中,很容易导致文件中的数据混乱,需要锁操作来保证数据的完整性,这里介绍的针对文件的锁,称之为“文件锁”-flock. flock,建议性锁,不具备强制性.一个进程使用 ...

  2. (转)Python3的四舍五入round()函数坑爹?不,更科学!

    原文:https://blog.csdn.net/lly1122334/article/details/80596026 Python3的四舍五入round()函数坑爹?不,更科学!Python2中, ...

  3. Laya中地图拼接的缝隙问题

    拼图的空隙. Egret也有拼图的空隙.比如制作飞机游戏,背景拼接轮换着下移,有明显的缝隙.用TextureMerger可以解决. 看了下Laya.可以设置repeat. 编辑模式,图片上右键,设置默 ...

  4. 开发日记:常用BAT批处理

    备份文件:BackupSourceCode.bat ::自动备份当前文件夹 ::by luomg, 21:15 2010-10-13 ::minguiluo@163.com @echo off tit ...

  5. (obj) error: LNK2019: 无法解析的外部符号解决方法

    利用VS2010 C++ 调用 labview生成的动态库编程时无法生成exe 报错信息: Cjj_32.obj : error LNK2019: 无法解析的外部符号 _GetPXIResource@ ...

  6. 寄存器vs缓存vs硬盘

    对于多核cpu来说(一个处理器cpu上有多个核),L1/L2是各个核独自的,L3是多个核共享的 如下配置:一个处理器cpu,六个核.处理器速度为2.2GHz即电流每秒钟可以振荡22亿次.二级缓存256 ...

  7. 【视频开发】【CUDA开发】英伟达CUVID硬解,并通过FFmpeg读取文件

    虽然FFmpeg本身有cuvid硬解,但是找不到什么好的资料,英伟达的SDK比较容易懂,参考FFmpeg源码,将NVIDIA VIDEO CODEC SDK的数据获取改为FFmpeg获取,弥补原生SD ...

  8. android基础---->SharedPreferences的使用

    SharedPreferences 还支持多种不同的数据类型存储,如果存储的数据类型是整型,那么读取出来的数据也是整型的,存储的数据是一个字符串,读取出来的数据仍然是字符串.这样你应该就能明显地感觉到 ...

  9. 解决ScrollView嵌套百度地图滑动冲突

    一.问题描述 scrollview中嵌套百度地图时会出现滑动冲突,地图无法滑动的情况. 二.期望结果 焦点在地图上时,只有地图移动,焦点在地图外部时,可以滑动scrollview. 三.解决方法 自定 ...

  10. Zuul学习笔记

    问题: 解决:(域名映射+前缀+禁止原来访问)