Vue-cli开发SPA应用(适用初学者)

た入场券 2022-06-15 04:36 93阅读 0赞

使用Vue开发SPA（单页面应用）估计各位博友都耳熟能详了，这里简单概要一下使用vue-cli快速开发单页面应用。本博文以window系统为例（虽然用的是Mac操作的，考虑到大多数博友是用window开发），Mac系统类似，不多赘述。

环境要求node 6.0以上(不要安装7.0，这是beta版)

下载链接[https://nodejs.org/en/][https_nodejs.org_en]

安装教程[https://jingyan.baidu.com/article/fd8044faf2e8af5030137a64.html][https_jingyan.baidu.com_article_fd8044faf2e8af5030137a64.html]

1.检测电脑是否安装了node，打开终端输入node -v 这里我使用的是6.10.3

![1093977-20170522181322820-2022803850.png][]

2.安装淘宝镜像（尽管这一步没什么必要，但是安装以后对之后的开发会有很大的帮助）

npm install -g cnpm --registry=https://registry.npm.taobao.org

`接下来就可以使用cnpm 代替npm执行命令了，速度会很快（需要了解cnpm的可以百度了解）`

`3.找一块空的文件夹（以后的项目可以放在这个文件夹下），按住shift键右击选择在此处打开终端，命令行继续cnpm i vue-cli -g（安装Vue脚手架，切记一定要全局安装）`

`4.检测一下vue-cli是否安装了,使用vue -V(这里是大写的V)，我这里是vue是2.8.1版本的`

![1093977-20170522202629367-951961001.png][]

5.命令行继续 cnpm i webpack -g(安装webpack)

6.命令行vue init webpack 项目名（这里写你的项目名字，例如vueproject）

这里会让你输入项目名，描述，作者之类的，一般单页面应用都需要路由，在选vue-router选yes，但是需要注意的是Eslint检查代码建议选no，这个是严格模式，建议不要使用！！！之后的选项都选no

7.按照提示 cd 项目名 进入你的项目所在文件夹

8.cnpm i (虽然这里提示的是npm install,这里使用cnpm 更加快捷一点，i 是install的简写),这时候你会发现文件内多了node\_modules文件夹，里面都是一些开发依赖

![1093977-20170522203021492-145513450.png][]

9.cnpm run dev 这时候项目就运行了

![1093977-20170522203229788-586883543.png][]

![1093977-20170522203401773-1795033304.png][]

这里你可以修改一些东西，看下效果，这里不需要刷新，因为webpack已经配置了热模块加载，无需刷新就能实现修改内容的替换。

router就是路由文件，App.vue是vue根文件，main.js是入口文件，这里只是简单的介绍一下Vue脚手架的搭建，之后会讲解Vue项目开发的内容。

另外细心的博友会注意到在我浏览器的右上角会有一个Vue的图标，这是我安装了devtools(vue开发工具，具体可以了解[http://www.cnblogs.com/liyongshuai/p/6891463.html][http_www.cnblogs.com_liyongshuai_p_6891463.html])

[https_nodejs.org_en]: https://nodejs.org/en/
[https_jingyan.baidu.com_article_fd8044faf2e8af5030137a64.html]: https://jingyan.baidu.com/article/fd8044faf2e8af5030137a64.html
[1093977-20170522181322820-2022803850.png]: /images/20220615/da43c3854e8c48a6a83227dc1f37bd23.png
[1093977-20170522202629367-951961001.png]: /images/20220615/e26b4ecbea0c4881b2b7f115caa1c8db.png
[1093977-20170522203021492-145513450.png]: /images/20220615/f0eca4f195d34b209cbb7167346d0bf7.png
[1093977-20170522203229788-586883543.png]: /images/20220615/7ec384087cf94fd5928c3b128bac52d8.png
[1093977-20170522203401773-1795033304.png]: /images/20220615/ecd716278edc47f6bd86bd093966dd2a.png
[http_www.cnblogs.com_liyongshuai_p_6891463.html]: http://www.cnblogs.com/liyongshuai/p/6891463.html