使用vue2.0创建的项目的步骤方法

 更新时间:2018年09月25日 14:36:35   作者:hcy0404  
这篇文章主要介绍了使用vue2.0创建的项目的步骤方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

1.由于vue项目依赖 node.js npm 需要先安装.   若没有请先安装,请按照此文章进行安装https://www.jb51.net/article/138020.htm

//检查是否有node.js  npm vue

win+r   输入cmd  输入node -v  回车 会出现node,js的版本

 输入npm -v  回车 会出现npm的版本

输入vue -V 回车 会出现vue的版本

2.安装vue:

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

由于npm网站在国内速度非常慢,所以可以在命令后面加上淘宝的镜像

即:npm install -g vue-cli --registry=https://registry.npm.taobao.org

之后,可以vue --V查看vue是否安装好,出现版本号即安装成功。

3.接下来是创建项目框架

如果想放到指定的目录下,先进入这个目录在执行创建项目的命令

例如:     

e:回车   //进入E盘      cd test回车   //进入E盘的test文件夹

E:\test\vue init webpack my-vue    //创建一个基于"webpack"的项目,后面是项目名 


依次按照提示输入,项目名、项目描述、项目作者等等,然后一路回车  看到最后这句项目就创建好了。

To get started:  就是告诉你接下来该做什么,依次完成下面3行命令就可以了。进入my-vue项目-----安装npm依赖-----运行项目

以下为此3步的详解

cd my-vue   在my-vue文件下看到项目结构:注:这是安装了依赖以后的截图,没安装依赖以前是没有node_modules文件夹的


4.安装项目依赖

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

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


若安装缓慢同样可以使用淘宝镜像

即输入命令:npm install --registry=https://registry.npm.taobao.org

当这个命令运行完成以后会多出一个node_modules文件夹,里面就是项目所需的所有依赖

可以看到有很多模块,这些模块都是在package.json文件里定义好了的.

5.运行测试

npm run dev 

出现如下红色框框表示启动完成,一般流览器会自动跳转出界面http://localhost:8080/,也可以手动打开流览器器输 入地址。


浏览器界面截图:


这样项目就搭建完成了。

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

相关文章

  • vue 使用lodash实现对象数组深拷贝操作

    vue 使用lodash实现对象数组深拷贝操作

    这篇文章主要介绍了vue 使用lodash实现对象数组深拷贝操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • Vue常用指令详解分析

    Vue常用指令详解分析

    这篇文章给大家详细分析了关于VUE的常用的相关指令内容,对此有需要的朋友们可以学习下。
    2018-08-08
  • vue keep-alive多层级路由支持问题分析

    vue keep-alive多层级路由支持问题分析

    这篇文章主要介绍了vue keep-alive多层级路由支持,在文章开头给大家介绍了keep-alive使用问题,解决使用keep-alive include属性问题,本文给大家介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • vue中的锚点定位问题

    vue中的锚点定位问题

    这篇文章主要介绍了vue中的锚点定位问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue.js将unix时间戳转换为自定义时间格式

    vue.js将unix时间戳转换为自定义时间格式

    这篇文章主要介绍了vue.js将unix时间戳转换为自定义时间格式的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 使用electron将vue-cli项目打包成exe的方法

    使用electron将vue-cli项目打包成exe的方法

    今天小编就为大家分享一篇使用electron将vue-cli项目打包成exe的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue3中<script setup> 和 setup函数的区别对比

    vue3中<script setup> 和 setup函数的区别对比

    这篇文章主要介绍了vue3中<script setup> 和 setup函数的区别,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • vue之邮箱、密码、手机号码等输入验证规则说明

    vue之邮箱、密码、手机号码等输入验证规则说明

    这篇文章主要介绍了vue之邮箱、密码、手机号码等输入验证规则说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue实现返回顶部按钮实例代码

    Vue实现返回顶部按钮实例代码

    这篇文章主要给大家介绍了关于Vue实现返回顶部按钮的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • vue cli+axios踩坑记录+拦截器使用方式,代理跨域proxy

    vue cli+axios踩坑记录+拦截器使用方式,代理跨域proxy

    这篇文章主要介绍了vue cli+axios踩坑记录+拦截器使用方式,代理跨域proxy,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论