今天第一次接触到了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配置。
这样就可以直接点击三角符号运行了
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/44373.html
