04 使用脚手架创建vue项目并启动

在安装了相关工具之后，我们现在就可以创建一个分模块的vue项目了。

1、前提约束

完成nodejs，vue-cli，webpack，webpack-dev-server的安装
https://www.jianshu.com/p/eb4d9e132f62

2、打开命令行，执行以下命令

vue init webpack vue-multymodule   回车，等待几分钟【取决于网络】
cd vue-multymodule    进入该项目
npm install    安装所需包，等待几分钟【取决于网络】
npm run dev     启动项目，等待几分钟【取决于网络】

以下是项目结构：

 

 

项目结构

 

3、在浏览器中输入提示的url

http://localhost:8080

4、使用idea或者webstorm打开刚才创建的项目【注意，第一次要在开发工具中配置node路径】，按以下图示操作：

 

打开npm脚本

 

 

执行

 

 

以上的执行等价于在命令行中执行 “npm run dev”。

 

5、测试，在浏览器中输入http://localhost:8080，得到以下结果

 

执行结果

 

以上就是创建一个项目模板，分贝在命令行和idea中启动的过程。