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搭建项目已经完成!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容