今天第一次接触到了SPA——单页面应用的开发。并使用Vue进行开发SPA。下面记录这次学习到的vue项目创建过程。
一、搭建Node.js环境
Node.js可以直接去官网下载:https://nodejs.org/zh-cn/。推荐下载长期支持版
安装过程选择默认即可,安装完成后,在cmd命令行中输入node -v和npm -v,查看是否安装成功。其中npm包管理工具是集成在Node.js中的。
如下图,出现对应版本号就说明安装成功了。
二、设置npm下载地址
因为执行npm install命令时,默认使用的是国外的下载源,可能导致下载依赖包时出错。
可以通过如下代码配置为使用淘宝镜像,改为国内镜像能有效提高下载的成功率。
npm config set registry https://registry.npm.taobao.org
通过以下代码查看npm的仓库地址,以查看是否成功设置下载地址。
npm config get registry
配置成功,这样就可以使用cnpm代替npm来安装依赖包了。
三、安装vue-cli 2.x
输入以下命令,安装vue的脚手架工具vue-cli
cnpm install -g vue-cli
安装完成后,就可以开始构建项目了。
四、构建项目
进入到想要放置项目的位置,输入以下命令使用webpack模板进行创建项目,
vue init webpack 项目名
运行命令后,用户需要进行一些设置,如下
下载完成后,如果上面操作的最后一项中不是选择npm,就需要cd到项目中,来使用以下命令自行下载依赖:
cnpm install
我这里,前面构建项目时已下载好了
五、运行项目
运行以下命令以热加载的方式运行我们的应用,热加载可以让我们不用手动刷新,浏览器就能实时看到修改后的效果。
cnpm run dev
通过以下地址,在浏览器中访问
出现如下界面,项目创建成功,这样就成功利用vue-cli初始化构建vue项目。
通过Ctrl+c停止项目运行
初始的项目目录结构如下:
六、IDEA中配置vue
(1)点击File–>Settings–>Plugins–>搜索vue.js插件进行安装,下面的图中我已经安装好了。
(2)在IDEA中打开刚才创建的test项目
opem–>对应的目录下,选择test项目,然后在IDEA中运行项目。
可以通过底部的Terminal窗口输入命令
为了方便使用,可以直接在IDEA中的Add Configuration配置。
这样就可以直接点击三角符号运行了