在一个干净的环境里,要从头开始创建一个脚手架项目,首先我们要安装nodejs,nodejs起个什么作用呢?nodejs是一个可以让前端运行在nodejs提供的服务器上的一个工具,换句话说就是nodejs提供了一个服务器,以下,我们一步一步的来创建一个脚手架项目。
1.安装node.js
打开官网,直接安装nodejs,安装完成以后,打开命令行工具cmd,输入node -v查看node版本
2.使用nodejs安装vue-cli脚手架
在cmd中使用命令npm install -g @vue/cli
npm 是nodejs的命令,install意为安装 @vue/cli是vue脚手架 -g指的是全局安装,安装完成后如下:
3.安装完成vue-cli脚手架工具以后,我们就可以通过vue-cli来创建一个简单的项目了
首先打开我们要创建项目的文件夹,例如:
我们在c盘目录下,创建了一个"vue项目"这样一个文件夹,
现在,我们在顶部的地址栏中输入cmd回车,出现如下界面
4.输入命令vue list 就可以查看使用vue如何创建相关内容
5,我们使用vue create myproject来创建一个我的项目,输入命令如下
在vue脚手架创建项目的时候,有红色框内的两个选项
default(babel,eslint):创建一个默认带有babel(javascript编译器,即就是将javascript语法向下兼容,让所有新的老的浏览器都认识的js语言,比如最新的es6,有些浏览器还不能识别,但是我们使用babel编译就可以将es6编译为es5从而被无法识别的浏览器识别,说白了就是把各种javascript千奇百怪的语言统统专为浏览器可以认识的语言)和eslint(语法校验器)默认的一个项目
Manually select features:自定义选择创建项目,如果我们项目中要用到路由,状态管理等一系列技术的时候,我们就可以选择自定义选项,现在我们选择这个选项,根据提示选择相关的技术加入到vue项目中,这一步省略,创建完成后出现
使用命令cd myproject进入到当前项目目录下,再使用npm run serve 来运行当前项目
运行完成后,我们在浏览器中输入地址http://localhost:8081/就能看到创建的项目了
此时,我们打开vscode代码编译器,右键将项目导入到编译器中,可以看到目录结构如下
代开package.json,我们看到结构如下
dependencies和devDependencies
devDependencies:开发依赖(development dependencies)
dependencies:生产依赖
devDependencies就是在项目开发过程中,我们需要安装的一些模块,在项目打包时候,我们无需打包在内的模块,安装命令为--save-dev,例如gulp,压缩css,js的模块,这些模块在我们的项目部署的时候,是不需要的,所以我们安装的命令就是--save-dev的形式安装 ,像express这些模块是项目运行必备的,所以就需要安装到dependencies中去,安装命令就是--save
安装模块到生产依赖(dependencies)命令:npm install --save moduleName(模块名)
1.安装模块到项目node_modules目录下
2.会将模块写入到dependencies节点。
3.运行npm install 初始化项目时候,会将模块下载到项目目录下。
4.运行npm install --production 或者注明NODE_ENV变量为production时候,会自动下载模块到node_modules目录中去。
安装模块到开发环境依赖(devDependencies)命令:npm install --save moduleName(模块名)
1.安装模块到项目node_modules目录下
2.会将模块写入到devDependencies节点。
3.运行npm install 初始化项目时候,会将模块下载到项目目录下。
4.运行npm install --production 或者注明NODE_ENV变量为production时候,不会自动下载模块到node_modules目录中去。
总结:
npm install 初始化项目安装所有依赖,
npm install --production 安装生产依赖
npm install --save moduleName(模块名) 安装模块到生产环境依赖
npm install --save-dev moduleName(模块名) 安装模块到开发环境依赖