Vue学习笔记一:使用vue-cli 创建开发环境

时间:2021-07-29 02:12:16

第一步:安装Node.js

      点击此处下载    选择对应的安装包,进行安装。

Vue学习笔记一:使用vue-cli 创建开发环境

第二步:安装淘宝镜像

   有一个问题,使用 npm 会导致网速很慢,对于大陆用户,建议将 npm 的注册表源设置为国内的镜像,可以大幅提升安装速度。 
进入nodejs安装目录下的npm环境下,打开命令行,输入以下命令:

npm install -g cnpm --registry=https://registry.npm.taobao.org

  直接复制上去就好,下面会出现一串代码,表示在安装,无需理会,如果停了太久,卡在那里,可以按ctrl+c 取消执行,重新键入命令,再安装

Vue学习笔记一:使用vue-cli 创建开发环境

第三步: 全局安装 vue-cli 脚手架

cnpm install webpack -g

  -g 表示全局,输出上面的指令之后,下面又会有一串代码,表示安装无需理会,安装完成之后可以检测一下,输出 vue ,会显示这样的情况,表示安装成功。

Vue学习笔记一:使用vue-cli 创建开发环境

第四步:安装 webpack

vue init webpack myproject 

创建一个基于 webpack 模板的新项目,后面的myproject指的是这个项目的名称,你也可以换成其它的。

然后会下载安装这套模板,命令行会出现几个问题,你跟着下面的步骤回答就可以了。

?Project name
?Project description
?Author
?Use ESLint to lint your code?(y/n)
?Setup unit test with Karma + Mocha?(y/n)
?Setup e2e tests with Nightwatch?(y/n)

第一行问你项目名称,输入 my-first-vue-project
第二行问你项目描述,输入 this is my vue
第三行问作者的名字,输入 你自己的名字就好
第四、五、六行都直接在后面输入 NO 。

  这个项目就初始化完成了,你可以在电脑上查看,在当前目录下就会多一个文件夹叫做 my-first-vue-project,里面会有些文件。

Vue学习笔记一:使用vue-cli 创建开发环境

第五步: 用CD命令行查找进入到工程目录

Vue学习笔记一:使用vue-cli 创建开发环境

第六步:安装依赖 
在当前工程目录下输入命令行:

cnpm install
  • 1

Vue学习笔记一:使用vue-cli 创建开发环境

安装完成之后,在电脑上回到 my-first-vue-project 这个文件夹,里面会多一个 node_modules 文件夹。

Vue学习笔记一:使用vue-cli 创建开发环境

第七布: 启动项目 
接下来继续输入以下命令行:

npm run dev
  • 1

Vue学习笔记一:使用vue-cli 创建开发环境 
服务器启动成功之后,下面就会给出一串指令告诉你:

Listening at http://localhost:8080
  • 1

然后到浏览器进入这个页面可以看见这样的页面: 
Vue学习笔记一:使用vue-cli 创建开发环境

这样就表示开发环境搭建结束啦。

Vue学习笔记一:使用vue-cli 创建开发环境的更多相关文章

  1. Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据

    目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...

  2. 【Vue 学习笔记 一、Vue开发环境搭建】

    搭建Vue的开发环境 1.首先安装Nodejs  (因为我的系统是Windows的所以就选择第一个了,这个看个人的开发环境) 下载好后,然后一路确定,如果有更改安装目录的需求,就自己切换安装目录,由于 ...

  3. Laravel学习笔记(一)安装配置开发环境

    摘要 Laravel的目标是给开发者创造一个愉快的开发过程,并且不牺牲应用的功能性.快乐的开发者才能创造最棒的代码!为了这个目的,开发者博取众框架之长处集中到Laravel中,这些框架甚至是基于Rub ...

  4. OpenCV2学习笔记01:Linux下OpenCV开发环境的搭建

    个人已经厌倦了Windows下的开发方式,于是决定转到Linux平台上来,当然我也知道这个转变会很艰辛,但是我还是要坚持.所以,后面的所有开发我都会基于Linux和Qt,先从开发环境的搭建开始做起,当 ...

  5. Java 学习笔记 第一章:Java语言开发环境搭建

    第一章:Java语言开发环境搭建 第二章:常量.变量和数据类型 第三章:数据类型转换.运算符和方法入门 1.Java虚拟机——JVM JVM(Java Virtual Machine ):Java虚拟 ...

  6. vue学习笔记:Hello Vue

    编写简单例子,了解下基本语法 <!DOCTYPE html> <html> <head> <meta charset="utf-8 "&g ...

  7. Vue学习笔记七:Vue中的样式

    目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...

  8. vue学习笔记:在vue项目里面使用引入公共方法

    首先新建一个文件夹:commonFunction ,然后在里面建立 一个文件common.js 建立好之后,在main.js里面引入这个公共方法 最后是调用这个公共方法 测试一下,我在公共方法里面写了 ...

  9. vue学习笔记-初始化一个vue项目&lpar;1&rpar;

    1.cnpm install -g vue-cliUsage:vue init <template-name> <project-name> 2.我们一般使用webpack模版 ...

随机推荐

  1. cornerstone忽略显示&period;DS&lowbar;Store文件

    在MacOS上使用svn工具时,经常发现变化列表里出现一堆的?文件,.DS_Store,对有强迫症的人来说很郁闷.处理起来很简单,就是在svn的配置里忽略这个文件.#ue ~/.subversion/ ...

  2. Install Linux Kernel - AT91SAM9260EK

    两.AT91SAM9260EK 2.1下载 介绍页: http://www.at91.com/linux4sam/bin/view/Linux4SAM/LegacyLinuxKernel 下载页: a ...

  3. 《炉石传说》建筑设计欣赏&lpar;7&rpar;:采用Google&period;ProtocolBuffers处理网络消息

    这一次,琢磨了一下Unity3D网络游戏发展的网络信息处理.服务器的网络游戏一般都是自主研发,因此,相应的网络消息处理应该培养自己.client/现在使用的邮件服务器之间的价差JSON和Google. ...

  4. python 8

    一.文件操作初识 1. path 文件路径 F:\文件.txt encoding 编码方式 utf-8, gbk ... mode 操作方式 只读,只写,读写,写读,追加... f1 = open(r ...

  5. &lbrack;Data Structure&rsqb; Tree - relative

    Segment Tree First, try to build the segment tree. lintcode suggest code: Currently recursion recomm ...

  6. winfrom 窗体控件实现二级联动

    ComboBox绑定数据源时触发SelectedIndexChanged事件的处理办法 事件,而这个时候用户并没有选择内容,其SelectedValue也不是对应字段的值.那么时写在SelectedI ...

  7. SpringMvc 启动原理源码分析

    了解一个项目启动如何实现是了解一个框架底层实现的一个必不可少的环节.从使用步骤来看,我们一般是引入包之后,配置web.xml文件.官方文档示例的配置如下: <web-app> <se ...

  8. IAR EWARM Checksum Technical Note

    IELFTOOL Checksum - Basic actions EW targets: ARM, RH850, RX, SH, STM8 EW component: General issues ...

  9. ngnix &plus;tomcat7 简单配置

    1.下载tomcat7 修改conf 文件夹下的server.xml文件 1.<Server port="8205" shutdown="SHUTDOWN&quot ...

  10. 渐变(Gradients)

    渐变是一种可以在两个或两个以上颜色之间实现平稳过渡的效果,分为线性渐变(Linear Gradients)和径向渐变(Radial Gradients). 在演示之前,先创建一个div,并添加基础样式 ...