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

 更新时间:2017年07月12日 16:25:30   作者:意外金喜  
本篇文章主要介绍了通过命令行生成vue项目框架的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

-- 安装nodejs

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

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

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

npm 介绍: https://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代码修改后,还得手动刷新页面,不过已经非常棒了.

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

您可能感兴趣的文章:

相关文章

  • Vue+mui实现图片的本地缓存示例代码

    Vue+mui实现图片的本地缓存示例代码

    这篇文章主要介绍了Vue+mui实现图片的本地缓存的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • Element Dropdown下拉菜单的使用方法

    Element Dropdown下拉菜单的使用方法

    这篇文章主要介绍了Element Dropdown下拉菜单的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • Vue.js第二天学习笔记(vue-router)

    Vue.js第二天学习笔记(vue-router)

    这篇文章主要为大家详细介绍了Vue.js第二天的学习笔记,关于vue-router的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • vue路由跳转传参数的方法

    vue路由跳转传参数的方法

    这篇文章主要介绍了vue路由跳转传参数的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 详解Vue-cli webpack移动端自动化构建rem问题

    详解Vue-cli webpack移动端自动化构建rem问题

    这篇文章主要介绍了详解Vue-cli webpack移动端自动化构建rem问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 基于webpack4+vue-cli3项目实现换肤功能

    基于webpack4+vue-cli3项目实现换肤功能

    这篇文章主要介绍了基于webpack4+vue-cli3项目的换肤功能,文中是通过scss+style-loader/useable做换肤功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • 基于vue 实现token验证的实例代码

    基于vue 实现token验证的实例代码

    这篇文章主要介绍了基于vue 实现token验证的实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-12-12
  • vue-router懒加载速度缓慢问题及解决方法

    vue-router懒加载速度缓慢问题及解决方法

    这篇文章主要介绍了vue-router懒加载速度缓慢问题及解决方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • Vue的路由动态重定向和导航守卫实例

    Vue的路由动态重定向和导航守卫实例

    下面小编就为大家分享一篇Vue的路由动态重定向和导航守卫实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue-router 导航钩子的具体使用方法

    vue-router 导航钩子的具体使用方法

    本篇文章主要介绍了vue-router 导航钩子的具体使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08

最新评论