Vue命令行工具(CLI)脚手架初始化项目

1、确保已经正确安装node.js和npm

进入node官网下载安装包,安装时全部直接选择下一步

2、检查环境配置

打开cmd输入node -v 查看已经安装node版本

输入npm -v 查看已经安装的npm版本

正确显示版本号后进入下一步

3、正式开始安装

全局安装vue-cli

打开cmd输入

npm install –global vue-cli   等待安装

4、基本配置选择

完成后切换到项目根目录下(依然是在cmd里面操作)

实例:项目文件夹为F:\learn vue\Travel,下面均以此项目目录为实例

f:                      //进入f盘

cd learn vue             //进入F:\learn vue文件

vue init webpack Travel    //创建一个基于webpack打包工具的项,Travle为文件夹名称,根据实际情况填写

点击回车,之后根据系统提示自行选择yes or no进行基本配置安装,具体提示信息如下

?Target directory exists. Continue? (Y/n) Y  //提示该文件夹已经存在,是否继续向改文件夹内添加

?Project name (Travel) travel           //若此处直接回车不填,则默认为括号内的项目名称

?Project description (A Vue.js project)   //项目描述,可以不填

?Author (此处太长省略) Wavlink  //项目作者,自行填写

?Vue build (Use arrow keys)         //采用的编译模式,这里选第一种

?Install vue-router? (Y/n) Y              //是否安装vue路由

?Use EsLint to lint your code? (Y/n) Y     //是否使用EsLint对代码的工整度进行检查

?Pick an ESLint preset (Use arrow keys)  //代码检测规范 这里选第一种

?Set up unit test (Y/n) n                  //是否进行单元测试  根据具体情况而定

?Set up e2e tests with Nightwatch? (Y/n) n  //是否进行e2e测试

//选择项目包管理工具  这里选择npm包管理工具

基本配置完成,等待安装

5、安装完成

6、测试

继续输入命令

cd Travel  //进入Travel目录

npm run dev  //运行dev指令

等待。。。此时正在进行自动化的打包

完成后,提示此时项目运行的地址是localhost:8080

浏览器输入此地址

显示此界面

至此vue配置全部完成

打包上线

自己的项目文件都需要放到 src 文件夹下

项目开发完成之后,可以输入 npm run build 来进行打包工作

打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看,项目上线时,只需要将 dist 文件夹放到服务器就行了。

Ps:生成文件说明