环境准备

  1. node.js 
  2. vue-cli

安装配置环境

1.下载node.js,使用默认配置安装 。

2.使用npm命令安装国内下载镜像(可选)

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

  tips:在命令行输入 npm -v 或cnpm -v 查看npm或cnpm 版本

3.全局安装vue-cli (vue-cli3.x 搭建的项目界面更为简洁,查看vue-cli 3.x 新特性

  cmd:  cnpm(或 npm) install vue-cli  -g

  tips:在命令行输入 vue -V 查看vue-cli版本(注意这里的-V一定要大写的’V‘

创建项目

1. 创建vue项目

  (vue-cli v2.x)cmd: vue init webpack  ”项目名称“

  (vue-cli v3.x)cmd: vue create ”项目名称“

2.安装依赖

  cmd:  cd到项目根目录 ,执行命令  npm install

3.运行项目

  (vue-cli v2.x)cmd: npm run dev 或 npm start

  (vue-cli v3.x)cmd: npm run serve

?什么是npm和cnpm

npm(node package manager):nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等) 
cnpm:因为npm安装插件是从国外服务器下载,受网络的影响比较大,可能会出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事。来自官网:“这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”

Vue 学习记录(一)-创建项目的更多相关文章

  1. Vue.js用脚手架创建项目

    安装全局脚手架 cnpm install vue-cli -g vue --version 用脚手架创建项目 创建项目 运行项目 停止项目:Ctrl+C 修改端口 config - index.js ...

  2. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  3. koa2学习笔记01 - 创建项目 —— koa生成器一键生成koa项目

    前言 从17年开始尝试学习搭建个人网站开始,就开始学习摸索node了,至今差不多快两年了. 说起来现在都9102年了,所以最近打算整体设计重构一下网站,索性node后台也重写一遍. 重温一下node, ...

  4. vue cli 3.0创建项目

    .npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. ...

  5. VUE环境搭建、创建项目、vue调试工具

    环境搭建 第一步 安装node.js 打开下载链接:   https://nodejs.org/en/download/    这里下载的是node-v6.9.2-x64.msi; 默认式的安装,默认 ...

  6. vue搭建环境并创建项目

    1.>npm install @vue/cli -g 2.创建项目A a.>vue ui b.在弹出的管理界面创建项目 或 a.npm install -g @vue/cli-init b ...

  7. Vue学习记录(一)

    一.引入js文件(直接采用CDN): http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js 二.简单实例: (1)HTML代码: &l ...

  8. vue学习记录

    vue中常用的指令 v-model 双向数据绑定,一般用于表单元素 v-for 对数组或对象进行循环操作,使用的是v-for <!-- 普通循环 --><li v-for=" ...

  9. VUE环境安装和创建项目

    1.首先要安装nodejs和npm. 下载nodejs安装,下载地址:https://nodejs.org/en/ 安装很简单一路next即可. 安装完成后可以在cmd窗口输入node -v 和 np ...

随机推荐

  1. Numpy 随机序列 shuffle & permutation

    1. numpy.random.shuffle(x) Modify a sequence in-place by shuffling its contents. This function only ...

  2. Python GUI教程一:Hello World

    STEP 1:PyQt5基本介绍 Qt是GUI编程中非常受欢迎,也是非常强大的一个工具. PyQt5 是Qt的Python版本.它大概涵盖了620个类,6000多个函数.PyQt5进行双重许可,开发者 ...

  3. 17-REST framework-Request与Response

    1.Django REST framework提供的视图的主要作用 1.控制序列化器的执行(检验,保存,转换数据) 2.控制数据库查询的执行 Request与Response 1.Request RE ...

  4. 05-Django模型(2)

    1.特殊查询 F和Q查询: 之前的查询都是模型对象的属性与常量值比较,两个属性怎么比较呢?使用F查询. F查询语法: from django.db.models import F F('属性名称') ...

  5. idea创建maven的web项目

    前言 今天搭xfire的时候,我想对xfire进行一下测试,就想弄个web工程试试,发现网上写的很多没有用的,就自己写了一下.十分精简.也介绍了如何解决maven骨架建立项目非常慢的问题. 介绍 1. ...

  6. 学习Python前言

    先介绍下自己: 我是小芒果,在一家互联网公司上班 目前担任的是测试工程师职 自工作开始至今,已经3年之载 一路过来倒也轻松 期间学过几次python没一次能坚持下来 随着行业的饱和 测试技术的要求 以 ...

  7. File获取当前目录下的所有子项 listFiles()

    package seday03; import java.io.File; /** * 获取一个目录中的所有子项 * @author xingsir */public class ListFilesD ...

  8. Flask 教程 第四章:数据库

    本文翻译自 The Flask Mega-Tutorial Part IV: Database 在Flask Mega-Tutorial系列的第四部分,我将告诉你如何使用数据库. 本章的主题是重中之重 ...

  9. Python【day 14-4】sorted filter map+递归文件夹+二分法查找

    def func(x): #普通函数 return x*x ret1 = func(10) #匿名函数 f = lambda x:x*x # 匿名函数写法: 匿名函数名=lambda 参数:返回值 ' ...

  10. Winform中设置ZedGraph的X轴的刻度根据曲线获取

    场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...