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

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

  • 前言介绍
    • 前期环境准备
    • 开始创建项目
    • 实例
    • 交流

前言介绍

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

前期环境准备

第一步 :安装好npm、node
从官网下载本机对应的npm版本和node版本,这里不做介绍。安装完成后检查是否安装成功。
检验方法:打开控制命令行程序-》cmd,输入node -v和npm -v是否能查看它们的版本号,如果有说明安装成功。如下图
使用webpack脚手架创建一个vue项目_第1张图片
假若node自带的npm不是最新版本的可以使用命令
npm install -g npm
这样npm就为最新版本了(-g代表全局安装)

开始创建项目

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

安装结果如下图
使用webpack脚手架创建一个vue项目_第2张图片
查看vue-cli安装是否成功,不能检查vue-cli,只能检查vue

使用webpack脚手架创建一个vue项目_第3张图片
第三步 :创建项目

选定路径,新建vue项目。这里我已movie项目为例。首先使用cd “路径”进入对应的目录,本例目录为
在这里插入图片描述
使用命令新建项目并且设置项目名等信息。
vue init webpack “movie”
使用webpack脚手架创建一个vue项目_第4张图片
第四步 :运行项目

现在已创建好movie项目,使用命令进入项目根目录
cd movie
在这里插入图片描述
进入项目目录后,运行之前先安装依赖,使用命令,此步骤在movie目录下操作!!!

npm install

npm run dev

使用webpack脚手架创建一个vue项目_第5张图片
使用webpack脚手架创建一个vue项目_第6张图片
至此vue的movie项目就已经创建完成了。下面请看movie项目的初始界面
使用webpack脚手架创建一个vue项目_第7张图片
使用vue-cli初始化构建vue项目,我们会获得一个文件结构,如下图:
使用webpack脚手架创建一个vue项目_第8张图片
其中src是我们写的东西,包含大概以下文件!
使用webpack脚手架创建一个vue项目_第9张图片
现在你就可以愉快地码代码啦!如果对你有用麻烦评论个1,谢谢浏览

实例

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

https://github.com/hzequn/vuemusic

交流

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

微信:huang009516

你可能感兴趣的:(前端知识)