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

前言介绍

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

前期环境准备

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

开始创建项目

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

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

使用webpack脚手架创建一个vue项目
第三步 :创建项目

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

现在已创建好movie项目,使用命令进入项目根目录
cd movie
使用webpack脚手架创建一个vue项目
进入项目目录后,运行之前先安装依赖,使用命令,此步骤在movie目录下操作!!!

npm install

npm run dev

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

实例

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

https://github.com/hzequn/vuemusic

交流

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

微信:huang009516

相关文章:

  • 2021-11-05
  • 2021-10-03
  • 2021-09-06
  • 2021-08-28
  • 2021-10-16
  • 2021-05-18
  • 2021-11-05
  • 2021-08-07
猜你喜欢
  • 2021-07-24
  • 2021-04-04
  • 2021-12-22
  • 2021-12-06
  • 2021-04-17
  • 2022-01-01
  • 2021-02-28
相关资源
相似解决方案