用vue-cli工具创建一个单页面的项目步骤及注意事项
1.使用命令npm install -g vue-cli 安装vue-cli工具
2.使用命令 vue init webpack app 创建一个单页面的项目,其中,app是项目的名称,会在创建好之后有一个app名字的文件夹
3.安装过程中的注意事项:
①:需要设置项目名称,直接回车,取默认值
②:填写项目介绍,直接回车,取默认值
③:填写项目作者,直接回车,取空值
④会有一长串的英文,想翻译看的同学可以去看,不想看的可以不看,不管看不看,都是直接回车就可以了
⑤:问我们是否需要安装vue-router路由,输入y回车
⑥:后面3项输入n回车即可
⑦:问我们是否需要自动帮我们执行npm install,选择最后一项,NO,我们手动安装.
到此为止,一个名字为app的单页面应用创建完毕
4.由于单页面项目也依赖了其他的一些js功能,所以我们需要手动安装项目中的package.json文件中所依赖的js文件.为什么要手动安装呢?因为webpack打包工具依赖了相当多(注意,是相当相当相当多)的js文件,安装完了之后,phpstorm编辑器会去编译新来的文件,那么文件太多太多太多,会多到你的phpstorm编辑器卡死.所以我们的处理步骤是如下:
①:运行 npm install jquery 回车,为什么安装jquery呢,因为jquery体积较小,就算让phpstorm编译也无妨.
②:找到创建出来的node_modules文件夹,对该文件夹点击反键,并按照我上课的处理来处理,让phpstorm不编译node_modules文件夹,这样可以防止卡死(当然,有不听话的同学,想尝试的同学,可以直接运行npm install来安装试试呗);
③:再来执行npm install安装package.json文件中的js文件(安装完了之后,看到结果不要惊讶)
④：npm run dev 运行
......
停止项目：Ctrl+c
打包项目：npm run build