vue2.0项目从零开发到打包部署

ゝ一纸荒年。 2022-12-26 04:41 203阅读 0赞

自从用饿了么框架重构项目以来，遇到 很多问题，我都有一一记录下来，现在特喜欢这个框架，说实话，如果你是用了vue这个技术栈的话，一定要用饿了么的pc端框架哦，遇到问题的时候在网上百度一下，就能找到解决方案，还有很多社区可以讨论，社区文档都比较成熟，很容易上手~~

Element UI手册：[https://cloud.tencent.com/developer/doc/1270][https_cloud.tencent.com_developer_doc_1270]  
github地址：[https://github.com/ElemeFE/element][https_github.com_ElemeFE_element]

vue2.0官方网站：[http://caibaojian.com/vue/guide/installation.html][http_caibaojian.com_vue_guide_installation.html]  
element-ui官方网站：[https://element.eleme.cn/\#/zh-CN][https_element.eleme.cn_zh-CN]

### 1：安装node ###

端开发框架和环境都是需要 Node.js ，先安装node.js开发环境，vue的运行是要依赖于node的npm的管理工具来实现，下载[https://nodejs.org/en/][https_nodejs.org_en]，安装完成之后，打开cmd开始输入命令。(我用的是win10系统，所以需要管理员权限，右键点击以管理员身份运行cmd)，不然会出现很多报错。

![daceebd3005c1b7768317cc93f5cee10.png][]

image

### 2：查看node的版本号 ###

下载好node之后，以管理员身份打开cmd管理工具，，输入 node -v ，回车，查看node版本号，出现版本号则说明安装成功。

输入命令： node -v

![e42752cbaedf912da8ec1e3bf840f089.png][]

image

### 3：安装淘宝npm镜像 ###

由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue.  
淘宝的cnpm命令管理工具可以代替默认的npm管理工具。

输入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

![bb33f917cf09ad9f27401d5ddc04464f.png][]

image

### 4：安装全局vue-cli脚手架 ###

淘宝镜像安装成功之后，我们就可以全局vue-cli脚手架，输入命令：cnpm install --global vue-cli 回车；验证是否安装成功，在命令输入vue，出来vue的信息，及说明安装成功；

输入命令：cnpm install --global vue-cli

![b32aa33653c2b6b41cd9b95854ff7f09.png][]

image

### 5：建一个新项目 ###

搭建完手脚架之后，我们要开始建一个新项目，这个时候我建议，尽量不要装在C盘，因为vue下载下来的文件比较大，如果要改盘的话，直接输入D：回车就可以直接改盘

输入命令：vue init webpack my-project-first

回车，my-project-first是我自己的文件夹的名字，是基于webpack的项目，输入之后就一直回车，直到出现是否要安装vue-route，

这个我们在项目要用到，所以就输入y 回车

![24c8acfb9dd99f4de20f8b90fdeb3f85.png][]

image

### 6：注意 ###

下面会出现是否需要js语法检测，这个我们暂时用不到，就可以直接输入no，后面的都可以直接输入no，都是我们暂时用不到的

![77db3e8f922e27e86e83ecc6bbd58b93.png][]

image

创建完成之后的提示：

![88c71853c6d1f3de076b3e4040afdd00.png][]

image

打开D盘查看一下，会发现多了一个刚刚创建的文件夹

![6a0dbba9f5517586b78dc0f98a352e87.png][]

image

### 7：进入项目文件夹 ###

文件夹已经下载好了，现在就可以进入文件夹，输入： cd my-project-first 回车进入新建的项目。

输入命令：cd my-project-first

### 8：在项目里安装依赖 ###

因为各个模板之间都是相互依赖的，所以现在我们要安装依赖，在项目里输入以下命令。

输入命令：cnpm install

![f61a98bd337599e319243f136fd6ec85.png][]

image

### 9：运行 ###

一切环境依赖安装准备就绪，我们来测试一下自己新建的vue项目的运行情况，输入命令：cnpm run dev直接回车。会弹出一个浏览器访问地址默认为localhost:8080。(我将地址修改为8081进行访问)

输入命令：cnpm run dev

![0939313bc8ffb2d36adfe8d539b9ad11.png][]

image

### 10：在浏览器输入localhost:8081 ###

8080是默认的端口，要访问的话，直接在浏览器输入localhost:8080就可以打开默认的模板了；(我的电脑上8080端口有需要，被另外一个项目占用，故而使用8081的端口)

在浏览器输入localhost:8081，显示如下，到此为止，vue开发环境搭建完毕。

![08778eca1833af7691f7ef4a5885e523.png][]

image

到这一步为止，可以在浏览器里面访问项目了  
我现在要做的是把项目托管在github，电脑没有开服务的时候也可以访问  
暂时没有买服务器

ctrl+c退出运行项目

![eb1827500b575bdedcf3416f9bd192fc.png][]

image

#### 1：使用npm run build进行打包 ####

打包完成显示

![5158dd3e2e4fd76d66eb39c8568d7429.png][]

image

这个时候可以看到项目里面多了一个dist文件夹

![64a019de0aea2fd18d06b2408c170662.png][]

image

### 2：打开dist/下的index.html ###

但是所有的js，css，img等路径有问题是指向根目录的，

修改config/index.js里的assetsPublicPath的字段，初始项目是/，现在改为./

![e1496e14a14b2440318d83b1aa6dd881.png][]

image

![47bccd9f4c5b83a094da3abad0d97eee.png][]

image

打开dist底下的index.html文件，修改文件路径

![957f0628e6acba3e11dc3fe7ffd5dccb.png][]

image

通过浏览器打开，可以访问

![443d929e3eee12f26956db3a5d820aa2.png][]

image

#### 3：新建一个仓库，将项目上传到github的仓库 ####

这里的步骤就不多说了，不会可以查看  
本地demo上传至github五步曲[https://www.jianshu.com/p/40f48a007c50][https_www.jianshu.com_p_40f48a007c50]

完成之后  
注意：这里vue为了节约上传文件的大小，会将dist文件给禁止上传了；所以要找到找到vue根目录下的.gitignore，打开文件删除掉 /dist/ 。

![253cc1b6ae6e98a82f32e52866315ebe.png][]

image

这样上传，才会有dist文件可供访问：

![a5415a8f38071f9d0c065553f0d0168d.png][]

image

### 4：在github上面的项目生成一个网址可以访问 ###

如果不会，可以从参考这篇文章  
在github上面的项目生成一个网址可以访问[https://www.jianshu.com/p/a3113a6cb575][https_www.jianshu.com_p_a3113a6cb575]

此项目生成的网网址

![aff616a02c16dcb8e4ea82e07517a252.png][]

image

点击进入网址，在网址后面手动输入，dist/index.html

这个时候，我们创建的项目就托管在github上面了

![2f7af62e58f1dffe405a326ad9fec842.png][]

image

访问链接：[https://wangxiaoting666.github.io/my-project-first/dist/index.html\#/][https_wangxiaoting666.github.io_my-project-first_dist_index.html]

也可以去阿里云上，自己买个域名，解析一下，完美

--------------------

#### 有属于自己的服务器的童鞋可以继续往下进行操作。 ####

在上面的文章里面，自己做了一个练手的小项目，买了服务器之后，也对linux的命令有了初步的认识和理解，现在开始把做好的项目部署到服务器上，通过域名来访问。

![6a074b5b2be3292a62357390abb19d84.png][]

现在开始打包了。

#### 1：使用npm run build进行打包 ####

打包完成显示

![c483e34a671a48572c0062b36a3a196c.png][]

image

这个时候可以看到项目里面多了一个dist文件夹

![046ab000be4b8e01db7d02694bc2db5d.png][]

image

### 2：打开dist/下的index.html ###

这个时候  
直接把dist文件拿出来，在浏览器里面没有办法访问

![769315ae5270180eb544e75add2a5366.png][]

image

修改config/index.js里的assetsPublicPath的字段，初始项目是/，现在改为./

![7937cde9ac830d00cba1cc7244fb4104.png][]

image

![d011691c29d8e3f338cd77975f242cc3.png][]

image

需要修改dist下的index.html资源路径为./  
打开dist底下的index.html文件，修改文件路径

![44a06166e49a4f8dfb924f7250040948.png][]

image

通过浏览器打开，可以访问

![29d7b414853817f4e5b047454666d0bc.png][]

image

### 3:项目打包处理完成，打开服务器连接工具，连接到自己的服务器 ###

将dist文件扔到服务器，最简单粗暴的方式，根据index.html路径访问即可。(当然后面还要继续利用nginx搭建静态资源服务器)

![a8f26726b43a908def24f3f2316e3631.png][]

image

好了，打开自己的域名+项目index.html路径就可以访问啦，这个时候，我们的静态资源vue项目部署到服务器上了。

[https_cloud.tencent.com_developer_doc_1270]: https://links.jianshu.com/go?to=https%3A%2F%2Fcloud.tencent.com%2Fdeveloper%2Fdoc%2F1270
[https_github.com_ElemeFE_element]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FElemeFE%2Felement
[http_caibaojian.com_vue_guide_installation.html]: https://links.jianshu.com/go?to=http%3A%2F%2Fcaibaojian.com%2Fvue%2Fguide%2Finstallation.html
[https_element.eleme.cn_zh-CN]: https://links.jianshu.com/go?to=https%3A%2F%2Felement.eleme.cn%2F%23%2Fzh-CN
[https_nodejs.org_en]: https://links.jianshu.com/go?to=https%3A%2F%2Fnodejs.org%2Fen%2F
[daceebd3005c1b7768317cc93f5cee10.png]: /images/20221120/0ea155656085462b984c3b118b7730ee.png
[e42752cbaedf912da8ec1e3bf840f089.png]: /images/20221120/9c8584f7e0ac4634a48eee2ebc29b956.png
[bb33f917cf09ad9f27401d5ddc04464f.png]: /images/20221120/6b1e5f7b4db34a798960e0ef5698b7ac.png
[b32aa33653c2b6b41cd9b95854ff7f09.png]: /images/20221120/9cf14736e84c4c1cb2ef377908945fa8.png
[24c8acfb9dd99f4de20f8b90fdeb3f85.png]: /images/20221120/341fd862c2774f3681fc91ba7049c48c.png
[77db3e8f922e27e86e83ecc6bbd58b93.png]: /images/20221120/ebaa650540fa4716a6b248e281e88387.png
[88c71853c6d1f3de076b3e4040afdd00.png]: /images/20221120/d84b4f771950489a94c878697a08327a.png
[6a0dbba9f5517586b78dc0f98a352e87.png]: /images/20221120/be1617d5cf44482a8af58c00665f8df9.png
[f61a98bd337599e319243f136fd6ec85.png]: /images/20221120/76bb27a613ad491d92456584750be141.png
[0939313bc8ffb2d36adfe8d539b9ad11.png]: /images/20221120/6750bdb6119d481dab88c31e1b2580e2.png
[08778eca1833af7691f7ef4a5885e523.png]: /images/20221120/36f759ee9ec44d9fb8dc5e27c92f2a49.png
[eb1827500b575bdedcf3416f9bd192fc.png]: /images/20221120/2f6d1ae312be4a119553c261e43b3896.png
[5158dd3e2e4fd76d66eb39c8568d7429.png]: /images/20221120/7e88d83bb0fd472eb32298e1fd2bedc0.png
[64a019de0aea2fd18d06b2408c170662.png]: /images/20221120/f79af5f9aa464ba9ad024e6998317a4b.png
[e1496e14a14b2440318d83b1aa6dd881.png]: /images/20221120/56a8e983921a46059c338f8bd3e8334a.png
[47bccd9f4c5b83a094da3abad0d97eee.png]: /images/20221120/534544d6d69d4de48762c0577c833ee4.png
[957f0628e6acba3e11dc3fe7ffd5dccb.png]: /images/20221120/d2bd9beac094425ca873cbbaf9345e98.png
[443d929e3eee12f26956db3a5d820aa2.png]: /images/20221120/827a48ad5ca046008125f6a996dcb026.png
[https_www.jianshu.com_p_40f48a007c50]: https://www.jianshu.com/p/40f48a007c50
[253cc1b6ae6e98a82f32e52866315ebe.png]: /images/20221120/3235c640b5a94335b1b017c1bf67e772.png
[a5415a8f38071f9d0c065553f0d0168d.png]: /images/20221120/609267d4b63a425cbbf386286e785cd0.png
[https_www.jianshu.com_p_a3113a6cb575]: https://www.jianshu.com/p/a3113a6cb575
[aff616a02c16dcb8e4ea82e07517a252.png]: /images/20221120/373c1c455fe84f41b9eda7d0300f93ce.png
[2f7af62e58f1dffe405a326ad9fec842.png]: /images/20221120/69928c36db514970abf5eb13c5a57376.png
[https_wangxiaoting666.github.io_my-project-first_dist_index.html]: https://links.jianshu.com/go?to=https%3A%2F%2Fwangxiaoting666.github.io%2Fmy-project-first%2Fdist%2Findex.html%23%2F
[6a074b5b2be3292a62357390abb19d84.png]: /images/20221120/6f9b3df999f64532987fab9bba0528b3.png
[c483e34a671a48572c0062b36a3a196c.png]: /images/20221120/129272b9f7ec4195bea5e2cf782adc57.png
[046ab000be4b8e01db7d02694bc2db5d.png]: /images/20221120/69d90535bcee4115bcc053cc97f7dd77.png
[769315ae5270180eb544e75add2a5366.png]: /images/20221120/88614462403c4a8ca7c6be2a414b0595.png
[7937cde9ac830d00cba1cc7244fb4104.png]: /images/20221120/16f8fb2668134af2b7a603da52cf01ef.png
[d011691c29d8e3f338cd77975f242cc3.png]: /images/20221120/f9ef95ed37da45a5a06d16c28e46ee34.png
[44a06166e49a4f8dfb924f7250040948.png]: /images/20221120/7bcd39b904804e078a0aa3280e2f10e0.png
[29d7b414853817f4e5b047454666d0bc.png]: https://img-blog.csdnimg.cn/img_convert/29d7b414853817f4e5b047454666d0bc.png
[a8f26726b43a908def24f3f2316e3631.png]: https://img-blog.csdnimg.cn/img_convert/a8f26726b43a908def24f3f2316e3631.png