前言介绍
创建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