0

0

安装vue.js实例教程

小云云

小云云

发布时间:2018-02-28 11:28:14

|

2044人浏览过

|

来源于php中文网

原创

本文主要和大家分享安装vue.js实例教程,希望能帮助到大家。

1.使用win+r打开cmd  
输入node -v npm -v 来检测是否已经安装了nodejs

如果已经安装成功了,就会出现以上图片中的样式

2.安装cnpm
node环境已经安装完成,npm包管理器也有了。由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像—cnpm。
在命令行中输入 npm install -g cnpm –registry=http://registry.npm.taobao.org 然后等待,安装完成如下图。
这里写图片描述
完成之后,我们就可以用cnpm代替npm来安装依赖包了
安装成功啦
3.安装vue-cli脚手架构建工具
在命令行中运行命令 npm install -g vue-cli ,然后等待安装完成。
这里写图片描述
4.用vue-cli构建项目
我们现在的练习项目都放在统一的位置,方便之后的管理,D:/nodetest下,我们通过指令来进入指定的目录.

我们来解释一下安装过程中都是什么意思?
Project name                  项目名称,可以自己指定,也可直接回车,按照括号中默认名字(注意这里的名字不能有大写字母,如果有会报错Sorry, name can no longer contain capital letters)

Project description (A Vue.js project)  项目描述,也可直接点击回车,使用默认名字

Author (……..)      renyuzhi

立即学习前端免费学习笔记(深入)”;

接下来会让用户选择

Runtime + Compiler: recommended for most users    运行加编译,既然已经说了推荐,就选它了

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere   仅运行时,已经有推荐了就选择第一个了

Install vue-router? (Y/n)    是否安装vue-router,这是官方的路由,大多数情况下都使用。这里就输入“y”后回车即可。

eslint算是一个代码语法规范检查的工具,不同意就不会把检查语法规范的功能加进webpack编译的流程里
进入目录

安装的过程是这个样子的

SLStuan手拉手团购程序(仿拉手网)
SLStuan手拉手团购程序(仿拉手网)

手拉手团购系统是一套Groupon模式的开源团购程序,是骏商网络(dream3.cn)旗下开发的一套仿拉手网团购程序,是国内首套采用ASP+MSSQL开发的团购程序,安装超简,功能超全面,在保留手拉手团购系统版权的前提下,允许所有用户永久免费使用、永久免费升级。手拉手团购系统内置多种主流在线支付接口,所有网银用户均可无障碍支付;短信发送团购券和实物团购快递发货等。 SLStuan手拉手团购程序 v

下载

安装的这个过程我们需要等待一会。
已经安装成功啦

我们进入到路径下
发现里面有东西了已经

我们打开其中的package.json文件,里面放置了配置文件
这些是全部所需要的依赖

5.安装项目所需的依赖
进入到目录下,使用cnpm来安装

我们进入到package.json这个文件中查看一下

6.根据配置文件的提示,我们在项目使用命令 npm run dev 来运行项目
这样就是已经完成啦

我们在本地打开localhost:8080就可以看到页面啦~现在就安装成功啦~比较懒,打字感觉好麻烦,就一直上图啦~

这里我们简单说一下每一个文件都是什么意思:

 build:最终发布的代码的存放位置。

 config:配置路径、端口号等一些信息,我们刚开始学习的时候选择默认配置。

 node_modules:npm 加载的项目依赖模块。

 src:这里是我们开发的主要目录,基本上要做的事情都在这个目录里面,里面包含了几个目录及文件:

         assets:放置一些图片,如logo等

         components:目录里放的是一个组件文件,可以不用。

         App.vue:项目入口文件,我们也可以将组件写这里,而不使用components目录。

        main.js :项目的核心文件

 static:静态资源目录,如图片、字体等。

 test:初始测试目录,可删除

 index.html:首页入口文件,可以添加一些meta信息或者同统计代码啥的。

 package.json:项目配置文件。

 README.md:项目的说明文件。

相关推荐:

phpstorm如何安装vue.js插件

相关专题

更多
高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

4

2026.01.16

全民K歌得高分教程大全
全民K歌得高分教程大全

本专题整合了全民K歌得高分技巧汇总,阅读专题下面的文章了解更多详细内容。

3

2026.01.16

C++ 单元测试与代码质量保障
C++ 单元测试与代码质量保障

本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法,包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程,以及常见代码质量问题的发现与修复。通过工程化示例,帮助开发者建立 可测试、可维护、高质量的 C++ 项目体系。

10

2026.01.16

java数据库连接教程大全
java数据库连接教程大全

本专题整合了java数据库连接相关教程,阅读专题下面的文章了解更多详细内容。

33

2026.01.15

Java音频处理教程汇总
Java音频处理教程汇总

本专题整合了java音频处理教程大全,阅读专题下面的文章了解更多详细内容。

15

2026.01.15

windows查看wifi密码教程大全
windows查看wifi密码教程大全

本专题整合了windows查看wifi密码教程大全,阅读专题下面的文章了解更多详细内容。

42

2026.01.15

浏览器缓存清理方法汇总
浏览器缓存清理方法汇总

本专题整合了浏览器缓存清理教程汇总,阅读专题下面的文章了解更多详细内容。

7

2026.01.15

ps图片相关教程汇总
ps图片相关教程汇总

本专题整合了ps图片设置相关教程合集,阅读专题下面的文章了解更多详细内容。

9

2026.01.15

ppt一键生成相关合集
ppt一键生成相关合集

本专题整合了ppt一键生成相关教程汇总,阅读专题下面的的文章了解更多详细内容。

6

2026.01.15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.7万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.3万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号