通过命令行生成vue项目框架的方法
本文介绍了通过命令行生成vue项目框架的方法,现在分享给大家
-- 安装nodejs
用命令行生成vue项目框架需要npm包管理器来安装,而npm又是在安装nodejs的时候同时安装的,
所以首先要安装nodejs,学习vue有必要了解下nodejs和npm的基本知识:
nodejs安装: https://www.geek-share.com/detail/2705405243.html
npm 介绍: https://www.geek-share.com/detail/2678615005.html
-- 安装命令行工具
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项目框架
- 通过命令行创建vue项目的方法
- 命令行生成vue项目框架
- 命令行生成vue项目框架
- 4000 用vue手脚架生成的项目直接修改时.vue文件后,保存编译就报一大堆的错,解决方法:
- vue-cli+webpack在生成的项目中使用bootstrap方法(二)
- vue新框架nux通过文件目录自动生成路由
- 在使用Mybatis框架的JavaWeb项目中通过Mybatis Generator逆向工程自动生成Java类文件
- 命令行生成vue的框架
- intelliJ IDEA 通过maven生成spring boots项目 jar包并运行调试方法
- vue2.0项目中的函数封装和引用。演示通过封装jsonp方法获取QQ音乐数据。
- vue项目优化之通过keep-alive数据缓存的方法
- vue项目通过webpack打包生成的dist文件放到express里边运行(vue+webpack+express)
- vue-cli+webpack在生成的项目中使用bootstrap方法(一)
- 命令行搭建vue的项目框架
- 直接通过excel可以识别的文件结构生成xls文件的方法,这样就可以不引用麻烦的ole了 (转)
- 10-21在巨匠写项目中所写的动态生成Table和按钮控制2种方法
- 数字郴州地理空间框架建设项目设计通过评审
- 通过Mysql的语句生成后门木马的方法
- 如何利用NB代码生成工具和NBear框架,快速开发WEB项目