第一步:安装node

  1. 首先下载安装node

安装步骤参考:https://www.cnblogs.com/qdwz/p/10820554.html

  1. window+R打开控制命令行cmd
  2. node -v查看node版本
  3. npm -v查看npm版本,虽然node自带npm,但如果不是最新版本,可以运行命令:nmp install -g npm,即可最新npm
  4. 大家都知道国内直接使用npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。$  npm  install  -g  cnpm

( --registry=https://registry.npm.taobao.org这样就可以使用cnpm 命令来安装模块了:)

第二步:项目初始化

  1. 第一步:安装vue-cli

    cnpm install vue-cli -g      //全局安装 vue-cli

  2. 查看vue-cli是否成功,不能检查vue-cli,需要检查vue

  3. 选定路径,新建vue项目,这里我是在桌面上新建了sun文件夹,cd目录路径,下面我一项目名为sell新建vue项目

    vue init webpack  ”项目名称“

  4.  

    5.现在已经创建好了,那就让项目先安装下依赖再运行一下,会出现下面的页面,操作指令是:

    cnpm install

    cnpm run dev

    注意 这里要在sell下进行安装和运行哦!!!

     

    6.啦啦啦  安装成功。

     

    7.利用vue-cil初始化构建vue项目,我们会获得一个初始化的文件夹结构,如下:

     

    8.下面开始进入你的vue之旅吧!!

    https://cn.vuejs.org/                    //官网才是开始的必经之路。。。。

vue如何新建一个项目的更多相关文章

  1. vue-cli新建一个项目

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

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

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

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

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

  4. 使用vue cli3新建一个vue项目

    写在最前 虽然身为一个java后端工作者,前端还是要沾点的,基于vue的火热,所以平常的工作中项目前端基本都是vue.这次就主要讲一讲vue项目的创建,并从vue的安装开始讲起,附带上我之前安装使用时 ...

  5. VUE 安装&创建一个项目

    1,安装node.js vue依赖nodejs,所以首先要安装node.js 然后打开cmd,输入命令, node -v.正常出现版本号,说明你已经安装成功了 下载地址:http://nodejs.c ...

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

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

  7. 【vue+axios】一个项目学会前端实现登录拦截

    原文链接:github.com 一个项目学会vue全家桶+axios实现登录.拦截.登出功能,以及利用axios的http拦截器拦截请求和响应. 前言 该项目是利用了Github 提供的persona ...

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

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

  9. 如何使用 Vue 来实现一个项目多平台打包?

    这个需求是源于我们要根据一个项目,针对某些组件(比如:日期 和 下拉组件 ) 和 页面 做终端的兼容,最终需要实现打包成2个平台:h5 和 pc  H5平台,日期组件:                ...

随机推荐

  1. centos 中文乱码解决办法2

    特别注意:vm10自带虚拟机共享工具,自动识别utf-8格式的中文文件内容 下面步骤摘自网络: 两种方案其实差不多,这里提供两个文件的下载地址,免得去网上搜这两个文件了: fonts-chinese- ...

  2. Angular开发者指南(六)作用域

    什么是作用域? 作用域是引用应用程序模型的对象. 它是表达式的执行上下文. 作用域以层次结构排列,模仿应用程序的DOM结构,它可以观察表达式和传播事件. 作用域的特征 Scope提供API($watc ...

  3. 统计学方法(PCA、ICA、RCA、LCA)

    ---------------------------------------------------------------------------------------------------- ...

  4. [LC] 91. Decode Ways

    A message containing letters from A-Z is being encoded to numbers using the following mapping: 'A' - ...

  5. 吴裕雄--天生自然 python开发学习笔记:一劳永逸解决绘图出现中文乱码问题方法

    import numpy as np import matplotlib.pyplot as plt x = np.random.randint(0,20,10) y = np.random.rand ...

  6. 微软Hyperlapse技术:让第一人称摄像稳定而流畅

    编者按:GoPro等第一人称摄像设备已经几乎成为了极限运动者的标配,但拍摄过程中的抖动常会让画面非常糟糕.微软Hyperlapse技术实现了将第一人称录像转化成稳定而流畅的视频.该成果的论文已发表在S ...

  7. Jmeter之CSV文件读取

    注意execl表生成的CSV文件的文件编码是GB2312和分隔符就好了

  8. [LC] 104. Maximum Depth of Binary Tree

    Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...

  9. Linux那些事——GTK+, Qt, Gnome, KDE, xWindow, xOrg区别

    Linux那些事--GTK+, Qt, Gnome, KDE, xWindow, xOrg区别 Linux不仅内核开源,系统配置也是高度可定制化的,其中就包括我们所熟知的图形界面,从桌面环境,主题,字 ...

  10. 千万不要在module里扩展较多逻辑,很容易引起项目异常。

    NOP项目 为保持紧跟NOP更新,项目组坚持不改NOP源码. 以触发器,插件化开发为拓展模式 NOP自定义好的接口或完全独立的新拓展功能很容易插件化. 但部分功能要在NOP原项目上扩展修改在不改源码的 ...