命令行创建一个vue项目
2017-08-24 09:34
531 查看
-- 安装nodejs
用命令行生成vue项目框架需要npm包管理器来安装,而npm又是在安装nodejs的时候同时安装的,所以首先要安装nodejs,学习vue有必要了解下nodejs和npm的基本知识:
nodejs安装: /detail/2680091482.html
npm 介绍: /detail/2680091661.html
-- 安装命令行工具
npm install -g vue-cli-g表示全局安装, vue-cli是模块,全局安装的模块可以在命令行直接使用.
红框里是安装命令,由于npm网站在国内速度非常慢,所以在命令后面加上淘宝的镜像,
很快就安装好了.也可以使用cnpm安装.
安装好后可以vue查看安装是否成功。下面就是成功的界面
--创建vue框架(如果之前安装过Npm,则从这一步开始即可)
vue init webpack my-project创建一个基于"webpack"的项目,后面是项目名
按照提示输入,项目名,项目描述,项目作者等等,看到最后这句项目就创建好了,
项目结构:这是安装了依赖以后的截图,没安装依赖以前是没有node_modules文件夹的
刚我们命令行输入的东西就在package.json这个文件里,打开文件
项目名字,版本,描述,作者等,后面还有运行项目命令,项目依赖,开发环境项目依赖等.
-- 安装依赖
生成了项目以后是不能直接运行的,现在很多项目都依赖许许多多的模块,需要逐一安装,ctrl+c 停掉刚生成项目的命令,cd my-project 进入项目跟目录, 用命令npm install 安装
可以看到有很多模块,这些模块都是在package.json文件里定义好了的.
dependencies是项目依赖,
devDependencies是开发时项目依赖.
-- 运行测试
好了,依赖安装完成后就可以运行我们的项目了命令:npm run dev
看到这样的输入项目就运行起来了
命令行生成的vue项目,还支持热启动,当项目文件有改动的时候,页面会自动变化,
相关文章推荐
- 如何创建一个vue的新项目,用命令行的方式创建
- vue开发环境准备-创建一个vue项目
- Vuex 进阶,创建一个笔记本项目
- visual studio code 命令行创建发布一个项目
- 如何用命令行创建一个cordova项目(完整示例)
- 创建一个vue项目的过程
- Vuex 进阶,创建一个笔记本项目
- 创建一个vue2.0项目
- 如何创建一个vue项目
- 创建一个vue项目
- 如何创建一个vue项目
- 通过命令行创建vue项目的方法
- 用vue创建一个项目
- 如何创建一个 vue.js 的项目
- ubuntu下使用命令行创建一个android项目
- 通过vue-cli创建一个项目
- 使用命令行工具npm新创建一个vue项目的方法
- Cordova之如何用命令行创建一个项目(完整示例)
- maven hello world: 使用maven前的一些配置和命令行创建一个webapp项目