本文是针对对于完全没有了解过vue 和npm,连运行环境和项目构建的都不会的小白,对于前端老司机的就不用看了,浪费时间。

使用npm 与vue-cli 构建vue 项目

第一步:安装运行环境(node与npm)

nodeJ官网:http://nodejs.cn/ 下载安装包( 安装)

安装完成后,需要检测是否安装成功

使用命令行cmd  打开dos 黑窗口,运行 node  -v npm –v,出现版号说明安装成功

注(npm 是node自带的,在安装node时已经安装了)

如何升级npm 的版本呢?很简单

执行命令:npm  i –g  to update (全局安装:建议) 或者 npm install –g npm

第二步:安装脚架手 vue-clic

安装vue-cli 有两种安装途径(npm 与 cnpm),二选一

(1) 使用npm 安装vue-cli,全局安装 (该方式安装比较慢,国外镜像)

运行:npm install  g vue –cli

(2) 使用cnpm ( 国内淘宝镜像)安装vue-cli

(2.1) 首先要注册cnpm

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

  

  (2.2) 检测 cnpm 是否安装成功,出现版本说明安装成功

  运行:cnpm -v

  

  (2.3)使用cnpm 安装脚架手vue-cli

  运行:cnpm install –g vue-cli 

  使用 vue –V(注意:大写V)查看是否安装成功

  运行:vue –V

  

第三步 :正式开始创建项目

  1.使用 命令:cd  目录路径 ,进入到你指定的创建项目的路径下

  如:

   

  2. 使用 vue init webpack 初始化项目

  运行:vue init webpack myfilst-vueproject(自定义文件目录名称)

  一般默认,直接回车就可以了

  

  在目前为止,已创建好一个vue 的项目,目录结构如:(结构详解看官网)

  

  3.按照提示运行流程,在当前项目的目录下安装模块

  运行: cd 项目名称

  运行: npm install

  

    正在安装模块依赖。。。。

  模块安装完成,项目根目录下多一个文件夹

  

 

 第四步:启动/运行项目

 运行:npm run dev

   成功运行,默认效果如:

  

  

  如果没有显示正常的页面,看是否端口是否被占用,默认运行端口为8080,

  项目根目录下 ->config->index.js

  

  

  修改该端口值,重新运行:npm run dev

  每次修改配置文件都要重新运行

第五步:打包上线

  运行:npm run build

   打包完成后,会在根目录下生成一个dist 的文件夹,可以在本地打开浏览,项目上线时,只需将dist 文件夹放在服务器即可

 

完结。。。。谢谢

新手入门vue 使用vue-cli创建项目的更多相关文章

  1. 新手入门指导:Vue 2.0 的建议学习顺序

    起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script> ...

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

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

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

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

  4. Vue CLI 创建项目

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

  5. vue新手入门之使用vue框架搭建用户登录注册案例,手动搭建webpack+Vue项目(附源码,图文详解,亲测有效)

    前言 本篇随笔主要写了手动搭建一个webpack+Vue项目,掌握相关loader的安装与使用,包括css-loader.style-loader.vue-loader.url-loader.sass ...

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

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

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

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

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

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

  9. vue(2)创建项目

    1.创建项目 cmd到自己指定目录下,执行 vue init webpack-simple hello-vue 2.安装项目依赖 cd hello-vue cnpm install 3.运行该项目,测 ...

  10. vue环境搭建及创建项目

    安装node环境:node环境下载地址:https://nodejs.org/zh-cn/download/,可根据对应的操作系统版本下载安装 安装完成后查看对应的node和npm版本,如没有出现对应 ...

随机推荐

  1. java基础---Java---面试题---银行业务调度系统(线程同步锁、枚举、线程池)

    银行业务调度系统的项目需求:   模拟实现银行业务调度系统逻辑,具体需求如下:   Ø 银行内有6个业务窗口,1- 4号窗口为普通窗口,5号窗口为快速窗口,6号窗口为VIP窗口.   Ø 有三种对应类 ...

  2. J2EE学习从菜鸟变大鸟之七 Servlet

    Servlet现在自己的理解是一个控制器,简单的可以理解为不同的JSP页面由用户发送过来的请求可以由Servlet控制器来控制其向下调用的方向(结合三层好理解),但它比较特殊,因为它通常会从外界接收数 ...

  3. [GitHub]第四讲:合并分支

    本地两个分支合并 先从最简单的一种情况着手.现在项目只有一个 master 分支,我来新建一个 idea 分支,实现自己的想法,commit 一下.那现在仓库内的情况就是这样的 这个是前面已经见过的情 ...

  4. Android进阶(二十四)Android UI---界面开发推荐颜色

    Android UI---界面开发推荐颜色   在Android开发过程中,总要给app添加一些背景,个人认为使用纯色调便可以达到优雅的视觉效果. 补充一些常用的颜色值:colors.xml < ...

  5. 【一天一道LeetCode】#101. Symmetric Tree

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given a ...

  6. NSString的几种常用方法—韩俊强博…

    要把 "2011-11-29" 改写成 "2011/11/29"一开始想用ios的时间格式,后来用NSString的方法搞定. 1.创建NSString字符串 ...

  7. (三十四)NavigationController初步

    为了了解底层,首先不基于UIWindow而基于UIWindow来创建App. 由于Xcode6没有以前的基于UIWindow的空项目,所以选择SingleView,然后删除storyboard,移除B ...

  8. C++ Primer 有感(命名的强制类型转换)

    C++四种强制类型转换的方法以及其应用场合,之前有看过这个知识点,但是,面试的时候怎么想也就没有写的很全面,于是,这里整理一下: C++中的四种强制类型转换除了具有C语言强制类型转换的功能外,还可提供 ...

  9. HTML移动开发参考

    小强的HTML5移动开发之路 http://blog.csdn.net/dawanganban/article/details/17591373 其他: http://blog.csdn.net/gf ...

  10. C语言所有作业练习题

    2015.08.11 1.计算十进制 42 转换为二进制.八进制.十六进制分别对应的值 2.计算二进制 11010110 对应的十进制值 3.计算八进制 075 对应的十进制值 4.计算十六进制 0x ...