安装node环境:node环境下载地址:https://nodejs.org/zh-cn/download/,可根据对应的操作系统版本下载安装

安装完成后查看对应的node和npm版本,如没有出现对应版本号则代表安装失败

安装vue-cli(vue脚手架)安装vue-cli之前确保要先是否安装webpack

webpack安装命令:npm install webpack -g

安装好后开始安装 vue-cli

npm install -g vue-cli

-g代表的是全局安装

vue-cli安装好后可以开始来创建项目,在电脑建立一个空的文件夹 进入命令行

输入vue init webpack todolist(todolist代表的是项目名)

创建项目,网速不好的话需要等待很长一段时间。。。。

创建成功

启用项目:

访问http://localhost:8080

使用vscode开发

下载vscode 地址:https://code.visualstudio.com/

下载中文插件

为什么能使在vscode中使用终端,这里需要下载cnpm

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

vscode里还可以安装Vetur,vue等插件。

vue环境搭建及创建项目的更多相关文章

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

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

  2. vue--1.环境搭建及创建项目

    转自https://blog.csdn.net/junshangshui/article/details/80376489 一.环境搭建及创建项目 1.安装node.js,webpack 2.安装vu ...

  3. 从零开始学Xamarin.Forms(二) 环境搭建、创建项目

    原文:从零开始学Xamarin.Forms(二) 环境搭建.创建项目 一.环境搭建 Windows下环境搭建:     1.下载并安装jdk.Android SDK和NDK,当然还需要 VS2013 ...

  4. vue环境搭建与创建第一个vuejs文件

    我们在前端学习中,学会了HTML.CSS.JS之后一般会选择学习一些框架,比如Jquery.AngularJs等.这个系列的博文是针对于学习Vue.js的同学展开的. 1.如何简单地使用Vue.js ...

  5. Vue环境搭建、创建与启动、案例

    vue环境搭建 """ 1) 安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 安装cnpm npm install - ...

  6. Vue(一)环境搭建、创建项目

    1.安装node和npm 因为node已经有npm,所以直接安装node,配置环境变量 官网地址:http://nodejs.cn/download/ 2.查看node是否安装成功,输入名nde -v ...

  7. 1.RN环境搭建,创建项目,使用夜神模拟调试

    1.环境搭建(Yarn.React Native 的命令行工具(react-native-cli)) npm install -g yarn react-native-cli 具体参考 参见官方(中文 ...

  8. [ExtJs6] 环境搭建及创建项目

    1. 环境搭建 sencha cmd 和 extjs6 sdk. sencha cmd: https://www.sencha.com/products/extjs/cmd-download/ ext ...

  9. Ionic01 简单介绍、环境搭建、创建项目、项目结构、创建组件、创建页面、子页面跳转

    1 Ionic 基本介绍 Ionic 是一款基于 Angular.Cordova 的强大的 HTML5 移动应用开发框架 , 可以快速创建一个跨平台的移动应用.可以快速开发移动 App.移动端 WEB ...

随机推荐

  1. idea搭建简单ssm框架的最详细教程(新)

    为开发一个测试程序,特搭建一个简单的ssm框架,因为网上看到很多都是比较老旧的教程,很多包都不能用了,eclipes搭建并且其中还附带了很多的其他东西,所以特此记录一下mac中idea搭建过程. 另: ...

  2. Leetcode: Find And Replace in String

    To some string S, we will perform some replacement operations that replace groups of letters with ne ...

  3. [LeetCode] 681. Next Closest Time 下一个最近时间点

    Given a time represented in the format "HH:MM", form the next closest time by reusing the ...

  4. LeetCode:接雨水【42】

    LeetCode:接雨水[42] 题目描述 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算按此排列的柱子,下雨之后能接多少雨水. 上面是由数组 [0,1,0,2,1,0,1,3,2,1, ...

  5. ASP.NET Core Restful Web API 相关资源索引

    GraphQL 使用ASP.NET Core开发GraphQL服务器 -- 预备知识(上) 使用ASP.NET Core开发GraphQL服务器 -- 预备知识(下) [视频] 使用ASP.NET C ...

  6. Mac和window实现双向数据传输

    Mac和window实现双向数据传输 总体步骤:第一步,在window上设置开发访问权限,然后选择要共享的磁盘或者文件夹第二步,在Mac上使用 Finder里面的网络,command+K,选择一个IP ...

  7. Centos7修改profile错误的解救方案

    在改profile的时候,改出问题了,除了cd以外的命令基本都不能用了.使用root用户执行: # export PATH=/usr/bin:/usr/sbin:/bin:/sbin:/usr/X11 ...

  8. phpexcel无法导出的解决方法

    phpexcel无法导出的解决方法 <pre> set_time_limit(0); ini_set("memory_limit","512M"); ...

  9. CF-Technocup3 D Optimal Subsequences

    D Optimal Subsequences http://codeforces.com/contest/1227/problem/D2 显然,每次求的k一定是这个序列从大到小排序后前k大的元素. 考 ...

  10. 8、1 周末总结+Mongdb

    都说加一个Id 注解就行了,其实还要加一条数据测试表是否生成 这里我们探讨  数据库是谁,表是谁 数据库在mongo启动的时候就指定了,这个无需我们关心 表根据实体类自动生成, 1.pom.xml & ...