1.安装node.js:Node.js安装包及源码下载地址为:https://nodejs.org/en/download/。

配置参考:http://www.runoob.com/nodejs/nodejs-install-setup.html;

2.基于node.js,利用淘宝npm镜像安装相关依赖。

在cmd里直接输入:npm install -g cnpm --registry=https://registry.npm.taobao.org,回车,等待安装...

注意:确保npm版本大于等于3.0.0,否则后续安装会出现问题;

3.安装全局vue-cli脚手架,用于帮助搭建所需的模板框架。

在cmd里 (1)输入:cnpm install -g vue-cli,回车,等待安装...

(2)输入:vue,回车,若出现vue信息说明表示成功;

4.创建项目。

在cmd里输入:vue init webpack vue_test(项目文件夹名),回车,等待一小会儿,依次出现‘git’下的项,可按下图操作

 

5.安装依赖。

在cmd里 (1)输入:cd vue_todo(项目名),回车,进入到具体项目文件夹

(2)输入:cnpm install,回车,等待一小会儿

回到项目文件夹,会发现项目结构里,多了一个node_modules文件夹(该文件里的内容就是之前安装的依赖)

基于脚手架创建的默认项目结构如下图所示:

 

6.测试环境是否搭建成功。(建议方法1)

方法1:在cmd里输入:npm run dev

方法2:在浏览里输入:localhost:8080(默认端口为8080)

运行起来后的效果如下图所示:

 

利用vue-cli创建Vue项目的更多相关文章

  1. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

  2. vue cli创建的项目 当你后期使用了ES6语法,如何解决浏览器兼容问题

    最近开发了一个项目,开发过程中,由于需要使用了async await ,于是发现,只有少数的浏览器支持,极大多数的浏览器是不支持这玩意的,在网上各种找解决方案,基本都是失败,最后总结了两个方案之后,尝 ...

  3. 用vue ui创建的项目怎么关闭eslint校验

    在Vue Cli的控制面板找到配置-ESLint configuration,然后关闭保存时检查就可以了

  4. Vue CLI及其vue.config.js(一)

    有时候我们为了快速搭建一个vue的完整系统,经常会用到vue-cli,vue-cli用起来很方便而且命令简单容易上手,但缺点是在构建的时候我感觉有一些慢,因为CLI 服务 (@vue/cli-serv ...

  5. 解决@vue/cli 创建项目是安装chromedriver时失败的问题

    最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...

  6. 用vue脚手架创建bootstrap-vue项目

    用vue脚手架创建bootstrap-vue项目 框架的地址:https://bootstrap-vue.js.org/docs/ 第一步 vue init webpack demo第二步 cd de ...

  7. [Vue CLI 3] vue inspect 的源码设计实现

    首先,请记住: 它在新版本的脚手架项目里面非常重要 它有什么用呢? inspect internal webpack config 能快速地在控制台看到对应生成的 webpack 配置对象. 首先它是 ...

  8. 用Angule Cli创建Angular项目

    Angular4.0来了,更小,更快,改动少 接下来为Angular4.0准备环境和学会使用Angular cli项目 1.环境准备: 1)在开始工作之前我们必须设置好开发环境 如果你的机器上还没有安 ...

  9. Vue CLI 创建项目

    使用命令创建VUE项目 运行以下命令[vue create [项目名]]来创建一个新项目: vue create hello-world 警告 如果你在 Windows 上通过 minTTY 使用 G ...

  10. 使用vue/cli 创建一个简单的项目

    首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...

随机推荐

  1. springmvc 处理put,delete请求

    前言:ajax用post编辑,删除提示越权操作状态为500,修改半晌最后大神指点说是:type修改为post和delete模式 最后还是一知半解,但是程序却正常使用了.当然注意我用的mvc,contr ...

  2. 【APUE】Chapter1 UNIX System Overview

    这章内容就是“provides a whirlwind tour of the UNIX System from a programmer's perspective”. 其实在看这章内容的时候,已经 ...

  3. Qt C++ 并发,并行,多线程编程系列1 什么是并发

    什么是并发,并发往简单来说就是两个或多个独立的任务同时发生,在我们的生活中也是随处可见.如果把每个人都当作一个独立的任务,那每个人可以相互独立的生活,这就是并发. 在计算机的系统里面,并发一般有两种, ...

  4. 做小Leader的心得体会

    只是自己的工作心得体会,代码属于也不够专业,大家不喜勿喷. 8月份来到这家新公司,没过一个月给派了个活:带着两个小弟给某银行开发一个小工具.功能很简单,就是用Java做一个windows上的C端工具, ...

  5. 再见NullPointerException。在Kotlin里null的处理(KAD 19)

    作者:Antonio Leiva 时间:Apr 4, 2017 原文链接:https://antonioleiva.com/nullity-kotlin/ 关于Kotlin最重要的部分之一:无效处理, ...

  6. python接口测试(二)——配置文件的使用

    在接口测试中,有些东西是固定不变的,比如url,若想更改的话就必须每个请求都更改,因此,可以放到配置文件中使用. 1.创建一个.ini的配置文件,如图: 2.读取配件文件中的内容,后续进行引用 #co ...

  7. linux下 su 与 su - 的区别和使用

    Linux下su与su -命令的区别   在启动服务器ntpd服务时遇到一个问题 使用 su root 切换到root用户后,不可以使用service命令: 使用 su - 后,就可以使用servic ...

  8. Tensorflow多线程输入数据处理框架

    Tensorflow提供了一系列的对图像进行预处理的方法,但是复杂的预处理过程会减慢整个训练过程,所以,为了避免图像的预处理成为训练神经网络效率的瓶颈,Tensorflow提供了多线程处理输入数据的框 ...

  9. ISAP 最大流 最小割 模板

    虽然这道题用最小割没有做出来,但是这个板子还是很棒: #include<stdio.h> #include<math.h> #include<string.h> # ...

  10. HDU 1398 Square Coins 整数拆分变形 母函数

    欢迎参加——BestCoder周年纪念赛(高质量题目+多重奖励) Square Coins Time Limit: 2000/1000 MS (Java/Others)    Memory Limit ...