使用webpack脚手架创建一个vue项目

前言介绍

创建vue的项目方式有很多种，这里仅介绍使用webpack脚手架来创建一个vue项目，下面将创建一个movie为例的项目。

前期环境准备

第一步 ：安装好npm、node
从官网下载本机对应的npm版本和node版本，这里不做介绍。安装完成后检查是否安装成功。
检验方法：打开控制命令行程序-》cmd,输入node -v和npm -v是否能查看它们的版本号，如果有说明安装成功。如下图

假若node自带的npm不是最新版本的可以使用命令
npm install -g npm
这样npm就为最新版本了（-g代表全局安装）

开始创建项目

第二步 ：movie项目初始化
1.第一步：安装vue-cli
npm install vue-cli -g //全局安装vue-cli

安装结果如下图

查看vue-cli安装是否成功，不能检查vue-cli,只能检查vue

第三步 ：创建项目

选定路径，新建vue项目。这里我已movie项目为例。首先使用cd “路径”进入对应的目录,本例目录为

使用命令新建项目并且设置项目名等信息。
vue init webpack “movie”

第四步 ：运行项目

现在已创建好movie项目，使用命令进入项目根目录
cd movie

进入项目目录后，运行之前先安装依赖，使用命令，此步骤在movie目录下操作！！！

npm install

npm run dev

至此vue的movie项目就已经创建完成了。下面请看movie项目的初始界面

使用vue-cli初始化构建vue项目，我们会获得一个文件结构，如下图：

其中src是我们写的东西，包含大概以下文件！

现在你就可以愉快地码代码啦！如果对你有用麻烦评论个1，谢谢浏览

实例

可以来我github浏览以下vue的项目，直接暴走吧！！！

https://github.com/hzequn/vuemusic

交流

如有任何问题可联系我，我们共同交流学习

微信：huang009516