利用脚手架创建vue项目step by step

一、环境准备

前端开发必需的两个工具

1.node

node.js 官网地址,可以借助 nvs 安装

命令窗口输入node -v 查看版本号

2.npm

  • npm 官网地址

命令窗口输入npm -v 查看版本号

3.淘宝镜像

  • 淘宝镜像 官网地址
    npm是外网工具,因此对于很多不能的用户来说,下载依赖可能会比较慢,淘宝镜像是国内公司复刻npm的镜像,方便用户快速下载依赖。

打开命令窗口安装:
npm install -g cnpm --registry=https://registry.npm.taobao.org

二、创建项目

1.创建指令

  • vue.js 官网地址  vue官网有非常详细的使用教程

cnpm i vue-cli -g                        #官方脚手架,稍等安装完毕再执行下面。
vue init webpack project-name  #project-name是创建的项目名称。

cd到项目project-name目录下进入

cnpm i  #安装项目的所有依赖
cnpm run dev  #启动项目。
在浏览器中输入:http://localhost:8080/ 就可以看到项目效果了。

利用脚手架创建vue项目step by step_第1张图片

2.项目目录

build:打包压缩文件,项目上传用。
config:配置文件。
node_modules:项目依赖文件。
src:项目开发主要文件。
test:测试用的文件。

利用脚手架创建vue项目step by step_第2张图片

三、脚手架的安装

如果我们安装的是脚手架 3.x 及以上版本,那么我们也可以使用 3.x 的脚手架通过 2.x 的方式来创建项目,但是如果安装的是 2.x 版本的脚手架是不能通过 3.x 的方式创建项目的。

1.安装3.x及以上版本的脚手架

npm install @vue/cli -g

2.安装 2.x 版本的脚手架

npm install vue-cli -g

3.查看脚手架的版本

vue -V

3.x版本以上脚手架创建项目

通过脚手架 3.x 版本 创建项目有两种方式,一种是在命令框中创建项目,一种是在图形化界面创建项目

命令框创建项目,输入创建命令

vue create project-name

3.x 版本基于2.x的旧模板创建项目

如果安装了 3.x 版本,那么就不能使用 vue-cli2.x 版本。因为 3.x 和旧版使用了相同的vue命令,所以 2.x 被覆盖了,所以就不能使用2.x版本中的有些命令。但是如果还然想使用 2.x 的vue init功能,那么此时就需要全局安装一个桥接工具。

npm install -g @vue/cli-init

安装完这个就可以创建项目了,初始化(创建)项目

vue init webpack project-name

两个版本项目目录的对比

在这里插入图片描述

通过对比会发现,3.x 少了许多的许多的配置文件的目录(build、config等),因为 3.x 可以在根目录下新建一个vue.config.js文件,所有的配置都会在这个文件里直接配置。vue.config.js是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。

四、项目模板选择

Vue.js官方提供了两种类型的模板项目:

  • 基于vue cli和browserify的项目模板
  • 基于vue cli和webpack的项目模板

这两种类型的项目模板分别提供了简单模式和完全模式,简单模式仅包含基于vue.js开发必要的一些资源和包,使用该模式可以快速地投入到开发。完全模式则还包括ESLink、单元测试等功能。

你可能感兴趣的:(Vue,前端开发,vue.js,前端,javascript)