通过命令行生成vue项目框架的方法

本文介绍了通过命令行生成vue项目框架的方法，现在分享给大家

-- 安装nodejs

用命令行生成vue项目框架需要npm包管理器来安装,而npm又是在安装nodejs的时候同时安装的,

所以首先要安装nodejs,学习vue有必要了解下nodejs和npm的基本知识:

nodejs安装: http://www.jb51.net/article/113457.htm

npm 介绍: http://www.jb51.net/article/87893.htm

-- 安装命令行工具

npm install -g vue-cli

-g表示全局安装, vue-cli是模块,全局安装的模块可以在命令行直接使用.

红框里是安装命令,由于npm网站在国内速度非常慢,所以在命令后面加上淘宝的镜像,很快就安装好了.也可以使用cnpm安装.

安装后在命令行输入 vue -version 能看到版本号表示全局安装成功,下面就可以使用命令行创建项目了.

-- 创建项目框架

vue init webpack my-project

创建一个基于"webpack"的项目,后面是项目名,

按照提示输入,项目名,项目描述,项目作者等等,看到最后这句项目就创建好了,

项目结构:这是安装了依赖以后的截图,没安装依赖以前是没有node_modules文件夹的

刚我们命令行输入的东西就在package.json这个文件里,打开文件

项目名字,版本,描述,作者等,后面还有运行项目命令,项目依赖,开发环境项目依赖等.

-- 安装依赖

生成了项目以后是不能直接运行的,现在很多项目都依赖许许多多的模块,需要逐一安装,

ctrl+c 停掉刚生成项目的命令,cd vue-project 进入项目跟目录, 用命令npm install 安装

同样是使用淘宝镜像.

当这个命令运行完成以后会多出一个node_modules文件夹,里面就是项目所需的所有依赖,可以看到有很多模块,这些模块都是在package.json文件里定义好了的.

dependencies是项目依赖,

devDependencies是开发时项目依赖.

-- 运行测试

好了,依赖安装完成后就可以运行我们的项目了命令:

npm run dev

看到这样的输入项目就运行起来了,然后打开浏览器,输入第二个红框的地址 localhost:8080,

浏览器截图.

项目就运行起来了.命令行生成的vue项目,还支持热启动,当项目文件有改动的时候,页面会自动变化,<script>标签里的js代码修改后,还得手动刷新页面,不过已经非常棒了.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 通过命令行创建vue项目的方法

    通过命令行创建vue项目的方法

    最近想要学习vue,正好看到资料,如何通过命令创建vue项目的方法,就留个笔记 环境要求: 安装有 Node.js. vue.vue-cli . 创建项目: vue init webpack projectName 进入项目,下载依赖: npm install 或者 cnpm install 运行项目: npm run dev 效果如下: 创建项目 进入项目,下载依赖 启动项目 浏览器查看效果 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • 通过命令行生成vue项目框架的方法

    通过命令行生成vue项目框架的方法

    本文介绍了通过命令行生成vue项目框架的方法,现在分享给大家 -- 安装nodejs 用命令行生成vue项目框架需要npm包管理器来安装,而npm又是在安装nodejs的时候同时安装的, 所以首先要安装nodejs,学习vue有必要了解下nodejs和npm的基本知识: nodejs安装: http://www.jb51.net/article/113457.htm npm 介绍: http://www.jb51.net/article/87893.htm -- 安装命令行工具 npm inst

  • Zend Framework基于Command命令行建立ZF项目的方法

    本文实例讲述了Zend Framework基于Command命令行建立ZF项目的方法.分享给大家供大家参考,具体如下: zend framework 的项目结构比较复杂,但是有既定的结构.zf提供了使用Command生成项目结构的工具,使用非常方便,初学者可以不用为了复杂的结构而Orz. 使用前的一些配置. 涉及到的文件: 1.zf 的 library 2.bin zf下载时所带的bin文件夹 3.php.exe 第一步: 将library和bin文件夹拷贝到服务器根目录,我的服务器跟目录为E:

  • 使用devenv在命令行中编译项目的方法

    本文介绍如何使用命令行运行Visual Studio编译项目. 一.devenv介绍 devenv是VisualStudio的可执行程序,一般在"..\Microsoft Visual Studio 12.0\Common7\IDE"下,用于运行Visual Studio. 使用devenv来编译项目的实例: devenv D:\Build\MyProject\Src\MyProject.sln /Build "Debug|x64" 二.devenv的使用帮助 1.

  • 利用Vue-cli搭建Vue项目框架的教程详解

    首先安装node.js 1.在新建的目录中按住shift 鼠标右键,在此处打开命令窗口,版本保证在4.x以上 node -v 2.全局安装vue脚手架 npm install -g vue-cli 同时可以使用vue和vue list 命令查看 3.初始化模板配置和项目名字 vue init webpack mycharts mycharts是项目名 其中有许多需要选择的选项,eslint适合团队开发,规范代码之类的,个人开发我喜欢用stylus,所以这个选项我不会选n,其他Y 4.有提示就按e

  • gitee命令行上传项目的步骤详解

    1.注册gitee账户 2.登录gitee新建个仓库,用来存放项目 3.找到需要上传的项目,右键,git bash here 这里需要先去官网下载安装git git官网 4.git init命令在当前文件夹下创建一个本地仓库 5.git remote add origin 远程仓库地址 6.对需要上传的项目添加追踪,git add .代表当前文件夹下的所有文件都添加追踪 git add "项目名" 单独给某个项目添加追踪 7.先提交到本地仓库 git commit -m "提

  • 使用 webpack 插件自动生成 vue 路由文件的方法

    一款自动生成 vue 路由文件的 webpack 插件 vue-route-webpack-plugin在项目中试点成功了,现在在项目中已经不需要再维护路由配置文件了,由插件自动生成,节省了大家维护路由的时间. 从长远来看,使用插件自动生成路由是具有一定好处的.当项目中的路由配置非常多的时候,为了区分业务,你可能需要分成许多个文件来存放这些路由文件,这样就不得不去维护这些路由文件. 比如这样的路由文件结构: |-src/ |-router/ index.js childrenRouter.js

  • Linux平台php命令行程序处理管道数据的方法

    本文实例讲述了Linux平台php命令行程序处理管道数据的方法.分享给大家供大家参考,具体如下: linux下有一个强大的命令|(管道提示符).它的作用是将前一个命令的结果交给后一条命令并作为后一条命令的输入.而linux下的大多数命令 也都支持这种方式.可是当笔者写完一个php的命令行小程序以后,对于怎样获得前一个命令的结果却陷入了僵局.难道php不支持这样的操作? 于是又开始问google大叔.找来找去,都是说php的命令行模式是怎么回事儿,也没有和我想知道的问题相关的资料.难道是俺的关键字

  • python在windows命令行下输出彩色文字的方法

    本文实例讲述了python在windows命令行下输出彩色文字的方法.分享给大家供大家参考.具体分析如下: 默认情况下python在控制台输出的文字信息都是黑白的,如果能将文字做成彩色的输出,输出效果会更完美,也很酷,不是吗,下面是一段演示代码,这段代码封装了一个color类用来输出带颜色的文字,只要调用该类里面的相关方法就可以了,非常简单. 复制代码 代码如下: #!/usr/bin/env python #encoding: utf-8 import ctypes STD_INPUT_HAN

  • 在CMD命令行中运行python脚本的方法

    网上给出了各种方法,都无碍乎先切换到Python脚本所在目录,然后输入Python脚本名称并回车,本文这里给出了更简便的方法. 方法一: 进入Python脚本所在的文件夹,shift+右击,选择"在此处打开命令窗口",按TAB键切换文件,选择目标python脚本,当然直接输入也行. 方法二: win+R,输入cmd,进入命令行窗口,直接将脚本文件拖到窗口里回车就可以了. 以上这篇在CMD命令行中运行python脚本的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多

随机推荐