源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-10-23 13:51 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:通过命令行生成vue项目框架的方法
本文介绍了通过命令行生成vue项目框架的方法,现在分享给大家 [b]-- 安装nodejs[/b] 用命令行生成vue项目框架需要npm包管理器来安装,而npm又是在安装nodejs的时候同时安装的, 所以首先要安装nodejs,学习vue有必要了解下nodejs和npm的基本知识: nodejs安装: [url=http://www.1sucai.cn/article/113457.htm]http://www.1sucai.cn/article/113457.htm[/url] npm 介绍: [url=http://www.1sucai.cn/article/87893.htm]http://www.1sucai.cn/article/87893.htm[/url] [b]-- 安装命令行工具[/b]
npm install -g vue-cli
-g表示全局安装, vue-cli是模块,全局安装的模块可以在命令行直接使用. [img]http://files.jb51.net/file_images/article/201707/2017071216131937.png[/img] 红框里是安装命令,由于npm网站在国内速度非常慢,所以在命令后面加上淘宝的镜像,很快就安装好了.也可以使用cnpm安装. 安装后在命令行输入 vue -version 能看到版本号表示全局安装成功,下面就可以使用命令行创建项目了. [img]http://files.jb51.net/file_images/article/201707/2017071216131938.png[/img] [b]-- 创建项目框架[/b]
vue init webpack my-project
创建一个基于"webpack"的项目,后面是项目名, [img]http://files.jb51.net/file_images/article/201707/2017071216131939.png[/img] 按照提示输入,项目名,项目描述,项目作者等等,看到最后这句项目就创建好了, 项目结构:这是安装了依赖以后的截图,没安装依赖以前是没有node_modules文件夹的 [img]http://files.jb51.net/file_images/article/201707/2017071216131940.png[/img] 刚我们命令行输入的东西就在package.json这个文件里,打开文件 [img]http://files.jb51.net/file_images/article/201707/2017071216131941.png[/img] 项目名字,版本,描述,作者等,后面还有运行项目命令,项目依赖,开发环境项目依赖等. [b]-- 安装依赖[/b] 生成了项目以后是不能直接运行的,现在很多项目都依赖许许多多的模块,需要逐一安装, [code]ctrl+c [/code]停掉刚生成项目的命令,[code]cd vue-project [/code]进入项目跟目录, 用命令[code]npm install [/code]安装 [img]http://files.jb51.net/file_images/article/201707/2017071216131942.png[/img] 同样是使用淘宝镜像. [img]http://files.jb51.net/file_images/article/201707/2017071216131943.png[/img] 当这个命令运行完成以后会多出一个[code]node_modules[/code]文件夹,里面就是项目所需的所有依赖,可以看到有很多模块,这些模块都是在package.json文件里定义好了的. [img]http://files.jb51.net/file_images/article/201707/2017071216131944.png[/img] dependencies是项目依赖, devDependencies是开发时项目依赖. [b]-- 运行测试[/b] 好了,依赖安装完成后就可以运行我们的项目了命令:
npm run dev
[img]http://files.jb51.net/file_images/article/201707/2017071216132045.png[/img] 看到这样的输入项目就运行起来了,然后打开浏览器,输入第二个红框的地址 localhost:8080, 浏览器截图. [img]http://files.jb51.net/file_images/article/201707/2017071216132046.png[/img] 项目就运行起来了.命令行生成的vue项目,还支持热启动,当项目文件有改动的时候,页面会自动变化,<script>标签里的js代码修改后,还得手动刷新页面,不过已经非常棒了. 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部