从0开始写Vue项目-环境和项目搭建

分手后的思念是犯贱 2024-05-06 23:01 8阅读 0赞

#### 一、前言 ####

**1.什么是Vue**

在我们了解Vue之前，我们来看看官网的说明：

1.  [Vue.js - The Progressive JavaScript Framework | Vue.js (vuejs.org)][Vue.js - The Progressive JavaScript Framework _ Vue.js _vuejs.org]
2.  [Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)][Vue.js - _ JavaScript _ _ Vue.js _vuejs.org]

**2.介绍与描述**

1.  动态构建用户界面的渐进式JavaScript框架
2.  作者：尤雨溪

![4b0213847717494dae1f5925d1e31006.png][]

**3.Vue的特点**

1.  遵循MVVM模式
2.  编码简洁，体积小，运行效率高，适合移动/PC端开发
3.  它本身只关注UI，可以引入其它第三方库开发项目

**4.与其他JS框架的关联**

1.  借鉴 Angular 的模板和数据绑定技术
2.  借鉴 React 的组件化和虚拟DOM技术

**5.Vue周边库**

*  vue-cli：vue脚手架
 *  vue-resource
 *  axios
 *  vue-router：路由
 *  vuex：状态管理
 *  element-ui：基于vue的UI组件库（PC端）

**扩充--**

关于axios

官网：[https://www.axios-http.cn/][https_www.axios-http.cn]

#### ![78f1589ac10a44bf867bc01206867854.png][]二、环境准备 ####

**1.安装[node][].js**

*  下载地址：[https://nodejs.org/en/][https_nodejs.org_en]
 *  官网页面展示

![99acf94d644d4532a26cd705fdb8033e.png][]

**2.检查node.js版本**

*  查看版本的两种方式
    
        node -v
    
        node --version
    
    ![f5b5b483da0a4791b563088f20fdd80e.png][]

**3.为了提高我们的效率，可以使用淘宝的镜像源**

*  输入：npm install -g cnpm --registry=https://registry.npm.taobao.org 即可安装npm镜像源

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

*  以后再用到npm的地方直接用cnpm来代替就好了，因为没有镜像源的话，安装速度比较慢
 *  检查是否安装成功

cnpm -v

#### ![f9c09f4a323d4e91a2f790c6ee329a75.png][]三、搭建vue环境 ####

**1、全局安装vue-cli**

*  这里注意：安装vue-cli对node.js的版本是有要求的

![在这里插入图片描述][2db977dce3a44f9d8724f8a6ab857198.png]

*  装的两种方式：输入cmd命令

npm install -g @vue/cli //这个是从国外下载的比较慢

cnpm install -g @vue/cli //这个是从镜像源下载

*  查看安装的版本（显示版本号说明安装成功）

vue --version

![ceb2adaffabc4edabe1a490c7e74cbd6.png][]

#### 四、搭建Vue项目 ####

**1.新建一个文件夹**

然后进入文件夹里面，在存储位置输入cmd

![1f1a35c94a064feebc1a2826a3b8e187.png][]

**2.创建项目**

(1)使用vue create 项目名称

![cc1ed84fc7a74d54a12f81dc585624c7.png][]

(2)创建好项目之后我们进行配置

选择 Manually select features

![acde34b293bd43aeb39153156ae2777f.png][]

按enter之后选择以下配置

我们用空格键来执行选择和取消的操作，我们选择的分别是Router、VueX，取消我们的Linter/Formatter

![397933619c6249be86cdc55f19cea94a.png][]

然后选择我们的Vue2.0版本

![ccda7eeeb48443b090268b8d5298ed44.png][]

按enter键之后选择N，然后我们选择 **In package.json**

![2b5aaa8a514546b3a43951a5a1d25e1a.png][]

继续enter之后仍然选择N

![63081f86f97c4521b50f0c09f6d6f43f.png][]

然后我们就可以等待项目的创建了

![8deb02ea837f419984254c5add99ce50.png][] 创建完成之后，我们在下面输入cd+项目名称，也可以直接输入cd，然后按一下Tab键，就可以直接跳到项目去了 ，然后继续输入我们的 npm run serve 来启动我们创建的Vue项目

项目正在启动：

![820178ac5459468ba603d8ae69d6ee99.png][]

启动完成之后，我们会发现生成了一个路径，然后就可以打开浏览器，输入路径，就可以看见我们启动之后的项目了

![b9b59ca71bcb4672972ce21e9a16ce7e.png][]![da76bc02907e4caeb999dc2006677a93.png][]

#### 五、开发工具运行Vue项目 ####

我们在之前创建项目的终端输入Ctrl + C 关闭项目，也可以直接关闭终端，然后拖动我们存放项目的文件夹到开发工具，用开发工具来打开我们的项目，我这里使用的是IDEA来运行项目

![10096d01f6d145ddafe0c550872692a5.png][]

打开我们的项目之后，我们点击上面的添加配置

![c05359b7b1f74c1090f49dace26f23d1.png][]添加配置完成后，出现如图的效果，我们点击运行项目

![44083d83701440748ff8289df0941ae9.png][]

当我们看见出现路径的时候，就说明我们启动项目成功了

![3e5b13dfe8744b53b20f5ee749e132d2.png][] 然后我们点击路径，就会出现跟之前一样的页面了

#### 六、修改运行路径(可跳过此操作) ####

> PS：执行此操作是因为自己已经有过路径为**http://localhost:8080/**的项目了，是为了区分项目才进行修改的

在我们的项目里面找到我们的**vue.config.js**，然后用以下代码替换之前的代码，然后再点击运行，就会生成自己设置的路径

module.exports = {
      devServer: {                //记住，别写错了devServer//设置本地默认端口  选填
        port: 9999,
      }
    }

![ec023bcc6af24d7695d0650c8d0226b6.png][]

#### ⛵小结 ####

以上就是对从0开始写Vue项目-环境和项目搭建的概述，之后会陆续更新后面的模块，包括后端代码，带大家手码项目，提升自己的编码能力。

![20201213121345281.gif_pic_center][]

> 如果这篇文章有帮助到你，希望可以给作者点个赞👍，创作不易，如果有对后端技术、前端领域感兴趣的，也欢迎关注 ，我将会给你带来巨大的收获与惊喜💝💝💝！

[Vue.js - The Progressive JavaScript Framework _ Vue.js _vuejs.org]: https://vuejs.org/
[Vue.js - _ JavaScript _ _ Vue.js _vuejs.org]: https://cn.vuejs.org/
[4b0213847717494dae1f5925d1e31006.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/2587b4a7f3864a4ba2e792dbab3cf2e3.png
[https_www.axios-http.cn]: https://www.axios-http.cn/
[78f1589ac10a44bf867bc01206867854.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/d4ebc767a0d24d6e851ca87a96353a82.png
[node]: https://so.csdn.net/so/search?q=node&spm=1001.2101.3001.7020
[https_nodejs.org_en]: https://nodejs.org/en/
[99acf94d644d4532a26cd705fdb8033e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/8114cb393a3b44c681655c3160c836b3.png
[f5b5b483da0a4791b563088f20fdd80e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/e8a904604ecc4d4ab8c0a4975af6f459.png
[f9c09f4a323d4e91a2f790c6ee329a75.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/b4471f12cf16461ba0e316442da35cb4.png
[2db977dce3a44f9d8724f8a6ab857198.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/b1066f97af2948d5a10074ecf88df491.png
[ceb2adaffabc4edabe1a490c7e74cbd6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/5aba21c876244519a406446f0e44d481.png
[1f1a35c94a064feebc1a2826a3b8e187.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/f7874a6f71fd497ebf232f455cd73bf4.png
[cc1ed84fc7a74d54a12f81dc585624c7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/aa79ede2fb3b430da8b6e58964d6a0ac.png
[acde34b293bd43aeb39153156ae2777f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/43b03043ff1946f1967848fbe0689122.png
[397933619c6249be86cdc55f19cea94a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/fec0203845a24b6c8b681961664de4cc.png
[ccda7eeeb48443b090268b8d5298ed44.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/69beef72c41441acb750795a6d5a5a77.png
[2b5aaa8a514546b3a43951a5a1d25e1a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/fe526952c9c94961b058da49bb8982d1.png
[63081f86f97c4521b50f0c09f6d6f43f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/71b2727a12114956b71ae8e35da7e3c3.png
[8deb02ea837f419984254c5add99ce50.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/1b9d3f4782cb4f16becdbb7e722314d6.png
[820178ac5459468ba603d8ae69d6ee99.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/fa1c7def23e04f2ca87b2d04f573b0ec.png
[b9b59ca71bcb4672972ce21e9a16ce7e.png]: https://img-blog.csdnimg.cn/b9b59ca71bcb4672972ce21e9a16ce7e.png
[da76bc02907e4caeb999dc2006677a93.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/8d22937519e14820b21cb76f29d656d9.png
[10096d01f6d145ddafe0c550872692a5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/07ba9cfbaa6842c39eeedcb3e3662204.png
[c05359b7b1f74c1090f49dace26f23d1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/bb4807ff428b4de79d797ebc8eba20fc.png
[44083d83701440748ff8289df0941ae9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/3e92fa891a214a34a58955dfb7b5de2b.png
[3e5b13dfe8744b53b20f5ee749e132d2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/dbfaabb9ecce487c81e614541146a2d6.png
[ec023bcc6af24d7695d0650c8d0226b6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/687905e1fa014fc2bfd2ebdbbe7ae646.png
[20201213121345281.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/8b4af64d1a10475da4223b9b9d76f164.gif