用vue-cli工具创建一个单页面

用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