vue.js环境搭建

vue最开始说是库,现在应该可以说是框架了,很多大公司都开始用vue了,这得源于vue的本质 1:数据化驱动,2:组件化模板。项目中用vue都得搭建环境,经过一段时间的摧残后终于有勇气来写篇关于vue环境搭建的博文了,我相信网上已经有很多前辈的博文能够帮助大家完成搭建,与我来说只是记录下自己搭建环境的一点心得,如若能够帮助到两三人,足以。   

 1:因为vue.js的运行是基于node.js的npm环境下,所以我们得先安装node.js,这个就不累赘了,网上下个node.js安装即可。

 2:记得刚开始的时候都不知道在什么地方输入命令。为了非计算机转行的同学看的明白→ a 移动你的鼠标至电脑左下角   b 点击,看到运行后点击运行,c 输入cmd。

           看到的就是命令面板。因为是在node.js的npm环境下执行的,所以我们得安装npm。这里有一个小技巧:如果在cmd中直接使用npm来安装的一些工具的话会比较慢,所以我们使用淘宝的npm镜像: npm install -g cnpm –registry=https://registry.npm.taobao.org  即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好              了 。

3:开始安装全局vue-cli脚手架,之所以要用vue-cli,是应为这个工具能帮我们搭建好我们需要的模板框架(可以理解为各种文件模板),比较简单。方法:cnpm install -g              vue-cli 回车,验证是否安装成功,在命令行中输入vue,出来vue的信息说明安装成功 

4:安装玩全局脚手架后,创建项目vue init webpack vue_project(vue_project为项目名)

  此处会出现一系列安装的信息,ESLint to your code 建议选No ,就是对写代码进行规范。最开始的时候没搞清楚选择了Yes,写项目的时候多个空格符号
  都会报错,很疑惑,报错的地方还比较多,建议如图所示选择。直接输入n然后按回车进入下一项。
  至此一个新的项目文件就被创建了,因为是在vue-cli下安装的,所以是vue-cli提供的默认模板样式
    

5:vue-cli安装出来的项目模板间是相互依赖的,所有我们需要进入项目中安装项目依赖。cd vue_project  回车 进入项目中(cd是进入的意思)
   ★★★ 此处需特别注意:从npm上安装依赖,即npm install虽然慢了点,但是安装的依赖包是完全的,没有少文件。
                          如若从cnpm上安装依赖,即cnpm install 可能会导致最后安装的依赖包不完整。
   ★不建议从淘宝镜像上即cnpm安装依赖,可能会导致项目运行不了。
(出问题时可以试着两者都试试)
         完成后你会发现项目中多了个node_modules文件,就是依赖包。

6:
  在项目中 cnpm run dev 运行项目
  
   8080是默认端口,在浏览器中输入localhost:8080就可以看到默认被打开了。
  ★:已经安装过npm环境和vue-cli全局脚手架了,下次创建项目的时候就不用再安装了,直接重复4 5 6步就可以了。
      如果是运行已经存在的项目则直接第6步就ok。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏C/C++基础

error: '[class name]' does not name a type

从命令中可以看出,我是对源文件tc_mysql.cpp进行编译。但是却始终报如下错误:

551
来自专栏进击的程序猿

ZooKeeper: Wait-free coordination for Internet-scale systems(笔记)

本文是读ZooKeeper: Wait-free coordination for Internet-scale systems的笔记,从第一手资料了解zook...

813
来自专栏码神联盟

灵丹妙药 | 关于缓存,你必须要知道的

这两天小编一直在总结缓存的要点,也同时参考了一些文档,仅此奉上,以供参考。 缓存是必备技能 身为后端开发的开发人员,缓存是必备技能。不需要花费太多的精力就能显著...

3387
来自专栏张戈的专栏

WordPress评论ajax动态加载,解决静态缓存下评论不更新问题

这是一个历史遗留问题,自从博客部署了 PHP 纯静态缓存之后,所有页面都是 html 静态内容了,而且在七牛 CDN 静态分离之后,速度更是达到极致! ? 不过...

3206
来自专栏程序员互动联盟

【线程池】线程池与工作队列

为什么要用线程池? 诸如 Web 服务器、数据库服务器、文件服务器或邮件服务器之类的许多服务器应用程序都面向处理来自某些远程来源的大量短小的任务。请求以某种方式...

3388
来自专栏向治洪

Freeline--Android平台上的秒级编译方案

Freeline 技术揭秘 Freeline是什么? Freeline是蚂蚁金服旗下一站式理财平台蚂蚁聚宝团队15年10月在Android平台上的量身定做的一个...

2137
来自专栏Golang语言社区

关于缓存你需要知道的

About Cache 作后端开发的同学,缓存是必备技能。这是你不需要花费太多的精力就能显著提升服务性能的灵丹妙药。前提是你得知道如何使用它,这样才能够最大限度...

34713
来自专栏IT技术精选文摘

缓存在分布式系统中的应用

缓存是分布式系统中的重要组件,主要解决高并发,大数据场景下,热点数据访问的性能问题。提供高性能的数据快速访问。 一、缓存概述 缓存是分布式系统中的重要组件,主要...

2559
来自专栏JAVA烂猪皮

大型分布式网站架构:缓存在分布式系统中的应用

缓存是分布式系统中的重要组件,主要解决高并发,大数据场景下,热点数据访问的性能问题。提供高性能的数据快速访问。

1132
来自专栏程序猿DD

云原生应用的12要素

简介 如今,软件通常会作为一种服务来交付,它们被称为网络应用程序,或软件即服务(SaaS)。12-Factor 为构建如下的 SaaS 应用提供了方法论: 使用...

32010

扫码关注云+社区