一直只是听说过vue.js很火,但是从来没有接触过,这次准备用它做个项目试试,顺便也学习一下前端开发,在网上试了很多种安装方法,都一一失败了,难道是自己的打开的方式不正确= =
在经过本人的不断尝试,终于把环境搭建成功了,顺便留下手记一篇,省得今后再去东找西找了,同时也方便广大新手在搭建环境的道路上少走点弯路。
1、首先我们要先安装Node.js,这是一切的基础,具体怎么安装我想不用我多说了吧。
2、安装完Node.js后,问题就出现了,由于许多npm包都是国外的,因此在安装过程中总是出现这样那样的错误。所以我们利用淘宝的的镜像服务器,来安装我们所需要的依赖文件。
npm install -g cnpm --registry=https://registry.npm.taobao.org
3、接着我们要安装vue的脚手架,用于搭建所需的模板文件
cnpm install -g vue-cli
安装完毕后,运行vue -V
来判断是否安装成功。
4、最后我们要初始化项目,在命令行中输入vue init webpack project
,其中project是项目文件夹,这样一来整个项目结构就创建完成了。
5、这时我们需要把该项目的依赖文件都安装好,直接进入该文件夹下执行cnpm install
,这样vue.js+webpack的基础环境就搭建完成了。
6、通过命令 cnpm run dev
来运行程序,默认使用的是8080端口,访问地址为:http://localhost:8080。
P.S.在开发过程中,我使用的是微软的VSCODE,打开项目后会报:未至定有效的tsserver,将禁用TypeScript语言。我之前用过TypeScript进行开发,所以在这里会报错,解决方法也很简单,在VSCODE中打开首选项->设置,然后在自定义的常用设置中添加以下内容即可,前提是保证已经通过npm install typescript -g
安装了TypeScript。
// 将设置放入此文件中以覆盖默认设置
{
"typescript.tsdk": "C:/Users/XXX/AppData/Roaming/npm/node_modules/typescript/lib"
}