一、环境准备
前端开发必需的两个工具
1.node
node.js 官网地址,可以借助 nvs 安装
命令窗口输入node -v 查看版本号
2.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/ 就可以看到项目效果了。
2.项目目录
build:打包压缩文件,项目上传用。
config:配置文件。
node_modules:项目依赖文件。
src:项目开发主要文件。
test:测试用的文件。
三、脚手架的安装
如果我们安装的是脚手架 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、单元测试等功能。