之前有做过一项基于vue+webpack的项目，怕时间太长赶紧记录下来。关于vue和webpack就不过多介绍了，可以去官网查看，这里只对如何搭建vue的项目做介绍。
1）首先万年不变的，我们需要安装开发环境——node.js，安装完成之后打开cmd输入一下代码验证是否安装成功：
node --version
如果安装成功则会相应输出node的版本号，为了提高效率和速度转国内淘宝镜像：
npm set registry https://registry.npm.taobao.org/
同样的如果安装成功则会输出cnpm的版本号，此时开发环境就安装成功了。
2）利用vue来做项目我们需要下载vue.js，这里是vue和webpack的打包配合使用，我们直接安装最新的版本：
cnpm install vue
在这里我使用了vue-cli脚手架，因此还需要安装vue-cli：
cnpm install -g vue-cli
使用命令 vue init webpack demo 搭建vue项目, “demo” 是你的项目名称（注意想要在哪个文件夹下新建这个项目命令行直接切换到改文件夹下即可）。接下来按照引导一路回车即可（主要是对这个项目的一些描述，以及是否使用eslint来检查代码）
以上步骤完成后就可以生成一个如下的项目结构了，其中src文件下的就是后面我们代码主要存放的目录了
生成之后我们需要给项目安装依赖环境，根据命令行的引导一步一步输入
回到demo所在的目录：cd demo ，然后执行 cnpm install 安装依赖环境，执行 cnpm run dev 即可运行项目，浏览器就可以看见运行结果了
浏览器地址栏输入：localhost:8080 即可查看
以上我们就成功搭建了一个vue的项目了，我们可以在HelloWorld.vue上做一些更改写我们自己的代码，也可以尝试新建一个vue文件写一些逻辑代码
网友评论