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


Posted in Javascript onJuly 12, 2017

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

-- 安装nodejs

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

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

nodejs安装: https://3water.com/article/113457.htm

npm 介绍: https://3water.com/article/87893.htm

-- 安装命令行工具

npm install -g vue-cli

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

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

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

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

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

-- 创建项目框架

vue init webpack my-project

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

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

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

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

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

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

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

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

-- 安装依赖

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

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

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

同样是使用淘宝镜像.

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

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

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

dependencies是项目依赖,

devDependencies是开发时项目依赖.

-- 运行测试

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

npm run dev

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

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

浏览器截图.

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

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

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

Javascript 相关文章推荐
IE innerHTML,outerHTML所引起的问题
Jun 04 Javascript
HTML node相关的一些资料整理
Jan 01 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 Javascript
vue项目base64字符串转图片的实现代码
Jul 13 Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
JavaScript从原型到原型链深入理解
Jun 03 Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 Javascript
node运行js获得输出的三种方式示例详解
Jul 02 Javascript
微信小程序实现点击返回顶层的方法
Jul 12 #Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 #Javascript
JQuery EasyUI的一些常用组件
Jul 12 #jQuery
JavaScript严格模式下关于this的几种指向详解
Jul 12 #Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 #jQuery
详解如何用webpack打包一个网站应用项目
Jul 12 #Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 #Javascript
You might like
php随机输出名人名言的代码
2012/10/07 PHP
PHP编程实现脚本异步执行的方法
2017/08/09 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
Jquery 基础学习笔记
2009/05/29 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
原生JavaScript实现的简单放大镜效果示例
2018/02/07 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
Python运行的17个时新手常见错误小结
2012/08/07 Python
Python Trie树实现字典排序
2014/03/28 Python
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
Python如何读取MySQL数据库表数据
2017/03/11 Python
Python实现两款计算器功能示例
2017/12/19 Python
django表单实现下拉框的示例讲解
2018/05/29 Python
Pandas GroupBy对象 索引与迭代方法
2018/11/16 Python
详解Python的循环结构知识点
2019/05/20 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
Django上线部署之IIS的配置方法
2019/08/22 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
益模软件Java笔试题
2012/03/27 面试题
体育专业学生自我评价范文
2014/01/17 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
学生安全责任协议书
2016/03/22 职场文书
优秀大学生申请书
2019/06/24 职场文书
小学生六年级作文之关于感恩
2019/08/16 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技