Vue入门之使用vue-cli初始化项目

开发环境

• windows 10
• vscode

安装步骤

step1. 安装Node.js，可以查看我的文章，仅供参考：Node.js入门及安装

step2.安装vue-cli

使用vue-cli（脚手架）搭建项目，vue-cli是Vue官方提供的用于搭建基于 vue+webpack+es6项目的脚手架工具。
GitHub地址：vue-cli

全局安装：-g 表示全局安装vue-cli

npm install -g vue-cli

step2.初始化项目

初始化基于webpack的模板项目，projectName为项目名称，可以自动生成目录及相关文件，跟Koa生成器差不多

vue init webpack projectName

在初始化的过程中会询问一些相关的说明和配置，这些说明和配置会写入package.json文件中，会自动生成对应的模块,如果需要使用ESLint规范和相关的unit test 和e2e，请输入yes，这样初始化出来的项目，会自动配置好对应的模块。。

image

初始化完成后

image.png

npm run dev

image.png

访问此地址即可看到

image.png

至此，vue-cli搭建项目已经完成！