1.首先我们需要安装node.js,下载地址是:https://nodejs.org/en/

之后是node.js的正常安装步骤;

接着打开window+R输入cmd回车进入命令行模块

2.确认node.js是否安装,输入:node -v          (若回车后有返回版本号,则说明已安装,若没有返回,表示需要你去安装node.js)

3.接着输入:npm -v

4.接着安装webpack,输入:npm install -g webpack

5.接着使用淘宝镜像输入:npm install -g cnpm --registry=https://registry.npm.taobao.org

6.接着安装vue的脚手架工具 ,输入:npm install -g vue-cli

7.安装完成后开始创建项目:创建项目myvue01

输入命令:vue init webpack myvue01

此时会不断要你输入些东西,注意到Eslint那个选项是选择N(Eslint是语法规则和代码风格的检查工具,会自动检测当前项目的代码是否符合预设的规则,如果你的代码写得不符合预设的规则会报错),然后一直回车。

8.创建好项目之后,进入到该项目,然后执行命令运行项目输入:npm run dev   (在这一步前也可以先安装依赖输入:npm install )

二.举例:若是我在f盘创建了一个名叫my-vuedemo01的vue项目,我要怎么打开页面呢?以下流程是:

cmd 打开命令

显示:

接着进入f盘:

接着找到文件夹名称:

接着执行运行:

最后就在浏览器中打开“localhost.8080”:

vue-安装及新建一个项目的更多相关文章

  1. 安装vue,并新建一个项目

    Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便 ...

  2. vue-cli新建一个项目

    零.我想把项目安装在C:\www\Arup.DAH.ABCD\SourceCode\FrontEnd这个目录下,所以在我想安装的位置,Shift+右键-->powershell窗口,打开下图位置 ...

  3. Android学习笔记(一)——新建一个项目

    //此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 1.打开Android Studio时出现以下界面,点击”start a new Android Studio ...

  4. 如何在jenkins上新建一个项目及其简单配置

    1.首先,点击[新建]进入选择页面,如下图(一般选择"构建一个自由风格的软件项目")     2.填好项目名称后,点击ok,跳转至如下页面,可以在这个页面进行项目的配置(包括拉源码 ...

  5. vue——安装并新建项目

    一.对于vue的安装: 1.安装vue之前先安装node,https://nodejs.org/zh-cn/download/,我装的是windows64位的: 2.下载好了之后就可以按照正常顺序安装 ...

  6. (一)scrapy 安装及新建爬虫项目并运行

    > 参考:https://www.cnblogs.com/hy123456/p/9847570.html 在 pycharm 中并没有创建 scrapy 工程的选项,需要手动创建. 这里就有两种 ...

  7. 安卓开发第一记 android stdio 安装后 新建测试项目报错

    Failed to resolve:com.android.support:appcompat-v7:报错处理   你在使用android studio时是否也出现过上图的报错,你还在为它的出现烦恼? ...

  8. Keil uVision4 ——如何新建一个项目

    一.打开Keil4软件,点击Project,再点击New μVision Projrct. 二.新建一个文件夹,并在里面输入这个项目的名字. 三.点击Intel,根据实际情况选择,这里选择的是80/8 ...

  9. Web jsp开发学习——新建一个项目

    然后 index.jsp编辑   新建一个servlet             准备发布      发布

  10. vue - 新建一个项目

    首先: 要先安装node 及 npm Node.js官方安装包及源码下载地址:http://nodejs.org/ 双击安装,在安装界面一直Next 直到Finish完成安装. 打开控制命令行程序(C ...

随机推荐

  1. 待补 http://acm.hdu.edu.cn/showproblem.php?pid=6602

    http://acm.hdu.edu.cn/showproblem.php?pid=6602 终于能够看懂的题解: https://blog.csdn.net/qq_40871466/article/ ...

  2. [AGC005F] Many Easy Problems

    link 题意简述 给定一颗无根树,对于所有大小为 $i$ 的点集,求出能够包含它的所有联通块之和,定义为 $f_i$ ,答案对 $924844033$ 取模. $n\leq 2\times 10^5 ...

  3. 基于 Python 的自定义分页组件

    基于 Python 的自定义分页组件 分页是网页中经常用到的地方,所以将分页功能分出来,作为一个组件可以方便地使用. 分页实际上就是不同的 url ,通过这些 url 获取不同的数据. 业务逻辑简介 ...

  4. javascript(DOM)实例

    JavaScript学习笔记 JS补充笔记 实例之跑马灯,函数创建.通过ID获取标签及内部的值,字符串的获取与拼接.定时器的使用 使用定时器实现在console中打印内容 Dom选择器使用与调试记录 ...

  5. 解决 vue-cli构建项目自动打开浏览器问题

    1.打开项目下的config/index.js 2.找到module.exports的 dev下的 autoOpenBrowser ,将 false 改成 true 3.控制台输入:npm run d ...

  6. Taro -- 上传图片公用组件

    Taro上传图片公用组件 子组件chooseImage //component/chooseImage/index.js import Taro, { Component } from '@taroj ...

  7. Linux性能优化从入门到实战:09 内存篇:Buffer和Cache

      Buffer 是缓冲区,而 Cache 是缓存,两者都是数据在内存中的临时存储.   避免跟文中的"缓存"一词混淆,而文中的"缓存",则通指内存中的临时存储 ...

  8. Perl脚本通过Expect登陆多台设备批量执行命令并Log

    本例子尝试使用Perl脚本借助Expect模块实现如下目的: 登陆多台设备 设备登陆信息按如下格式存放于文件中. $ cat hosts.txt 192.168.30.7:node1:telnet:b ...

  9. 树——binary-tree-postorder-traversal(树的后序遍历)

    问题: Given a binary tree, return the postorder traversal of its nodes' values. For example: Given bin ...

  10. 【leetcode】307. Range Sum Query - Mutable

    题目如下: 解题思路:就三个字-线段树.这个题目是线段树用法最经典的场景. 代码如下: class NumArray(object): def __init__(self, nums): " ...