如何搭建一个Vue项目和配置环境

                     如何搭建一个Vue项目和配置环境

一、Vue简介
Vue(读音/vju/，类似于view) 是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是， Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如：vue-router，vue-resource，vue x) 或既有项目整合。
二、配置和安装Vue的运行环境
1)、安装Node.js,可以去Node.js官网里面下载源代码和预构建的安装程序，也可以通过链接直接到官网直接选择相对应的版本安装：https://nodejs.org/en/download/ 可以选择相对应的版本号下载即可，（.msi）文件是Windows installer开发出来的程序安装文件，它可以让你安装，修改，卸载你所安装的程序。（.msi）文件就是Windows installer的数据包，把所有和安装文件相关的内容封装在一个包里。(.zip)文件是一个压缩包，解压后就可以使用，不需要安装，但需要手动配置环境变量。(一般不推荐)。可以使用第一种msi安装类型，直接安装就可以了，不需要配置环境变量。

2)、我们安装node.js成功后可以打开我们的CMD命令提示符窗口，输入node -v查看Node.js的版本号，可以输出版本号，就代表我们的node.js已经安装成功了，在我们安装了Node.js的时候同时也安装了npm文件，npm（node package manager）：nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）这个npm，就是一个软件包管理工具，我们也可以输入npm -v查看我们npm版本号。只要输出相应的版本号就等于安装成功了。

3)、安装Node.js cnpm(淘宝镜像加速器)，cnpm:因为npm安装插件是从国外服务器下载，受网络的影响比较大，可能会出现异常，安装cnpm可以让你下载国外软件和插件更快一些，也可以切换为taobao源npm set registry https://registry.npm.taobao.org/ 在命令行输入npm install -g cnpm --registry=https://registry.npm.taobao.org，等待下载完，然后等待安装完成，安装完成会显示updated 3 packages in多少秒，然后我们需要判断是否安装成功，在命令行内输入cnpm -v然后点击enter键，看命令行输出相关的版本号就等于cnpm安装成功了。

4)、测试cnpm可以使用后，然后安装我们的vue-cli脚手架构建工具，npm install -g @vue/cli 或者npm i -g @vue/cli然后回车，等待下载安装完成，如果命令行停止了，或者弹出多少秒，一般都是安装完了，我们可以在命令行输出vue -V,主要-V要大写，要不然命令行会显示错误，如果之前安装有其它版本的vue-cli脚手架版本，需要安装新版本的的vue-cli脚手架文件，则需要把以前的卸载了才能安装新版本的脚手架文件，卸载:不同的版本卸载方法不一样npm uninstall -g vue-cli这个命令是低于3.0版本以下的卸载方法，npm uninstall -g @vue-cli这个是3.0以上的版本卸载命令，然后把你需要版本的脚手架文件命令输入进去运行下载就可以了。(npm install vue-cli@2.9.6)指定的脚手架版本

5)、如果我们的node.js、npm还有我们的cmpm(淘宝镜像)和vue-cli脚手架文件都安装成功了，可以在我们的命令行输入vue ui回车，命令行会自动调试，然后直接跳转到我们Vue GUI可视化面板页面。如果可以跳转到我们的Vue GUI可视化面板页面就代表我们Vue的环境已经配置好了。注意：vue ui可视化面板需要我们的vue-cli脚手架文件版本在3.0以上，否则打开不了我们的vue GUI可视化面板页面。

三、使用Vue GUI可视化面板创建一个Vue项目，
1)、通过我们Vue的可视化面板页面，可以通过导航栏选择创建项目，然后选择我们项目的存放地址，点击在此创建新项目。

2)、这是我们的项目详情页面，项目文件夹，是我们存放的项目名称，然后可以选择包管理器(一般默认)，然后就是有一些选项，是否将已有的文件夹覆盖和无新手指引的脚手架项目，初始化我们的Git仓库,系统已经帮我们初始化了，我们只需要提交个信息就可以了，然后下一步。

3)、预设一套定义好的插件和配置，你也可以设计一套自己常用配置，方便以后创建项目使用，也可以手动配置项目。

4)、进入到我们的功能面板，选择我们创建项目的必选插件，Babel，Router:路由，Linter/Formatter:通过Linter/Formatter可以让我们的代码进行格式效验，还有把我们的使用配置文件选择上，它会把我们的插件的配置保存在各种的配置文件中，也可以根据自己项目需要的插件进行选择，然后点击下一步。

5)、进来到我们的配置面板，User history mode for router问我们是否使用历史的路由，我们记得要把这个选项关闭，，
我可以使用哈希的路由，因为兼容性更强大些，选择我们的linter和formatter的配置文件，这里我们选择ESLint+Standard config标准版的配置文件，然后其它的选项默认就行了，点击我们的创建项目就OK了。

6)、点击创建项目时问你是否保存新预设，你可以选择保存一套预设文件，以后创建项目可以直接使用这一套保存的配置和选项功能，也可以不保存预设，直接创建项目。

7)、通过创建项目后，会跳转到我们的项目面板页面，我们可以在项目面板里面配置我们的部件，下载插件，添加依赖，和配置文件，还有我们的任务配置和编译。

8）、选择到我们的插件导航视图，我们需要下载安装我们element ui组件库插件，点击右上角的添加插件。

9)、跳转到我们的添加插件页面，搜索我们vue-cli-plugin-element插件，选中，然后点击右下角的安装即可。

10）、配置一下我们的插件，一开始是默认下载element的所有插件，我们需要选择Import on demand下载我们需要的就行了，Choose the you want to load是选择语言，默认就行了。

11)、安装成功绘制插件的面板里面显示已安装的Element UI插件。

12)、配置我们的axios库，支持我们在项目中发起网络请求，选择我们依赖选项栏，进入面板我们的依赖面板，在页面左上角选择安装依赖，搜索我们axios库文件，选择版本，选择安装到我们的运行依赖里面，点击安装axios就行了.

13)、安装成功后会返回我们依赖的显示面板，会显示我们安装的axios运行依赖包文件。

14)、把我们基本的文件插件和依赖安装好了，可以来到我们的任务视图选择我们的server进行编译和更新，直接点击左上角的运行，然后点击输出，server会帮我们编译和更新我们的Vue项目，编译完成后可以点击server输出的http://localhost:8080/#/–http://192.168.45.139:8080/#/链接可以跳转到我们配置项目信息的面板。

15)、如果把Element成功配置到我们的项目中，就会跳转到这个面板页面，可以会进入到Vue.js欢迎页面,里面会有如何配置和项目指南，还有Vue-cli的文档链接跳转，会打印出相关的cli插件：通天塔，路由器。Eslint。还有基本链接，一些核心文档、论坛、社区聊天、推特、消息的资源页面，可以直接访问，还有我们的生态系统，Vue路由器、Vuex、vue-devtools、vue-lasder、真棒-vue一些资料文档介绍页面链接。

16)、把我们通过面板创建的项目导入IDEA项目中，通过File–>Open选择你通过UI面板创建的额项目文件夹选择，点击OK导入就可以了。

17)、配置我们的启动器，选择到我们的npm文件，选择相对应的配置类，把我们的Scripts文件选择到serve，然后点击OK就可以了。然后运行我们的项目。

18)、直到输出完成后，显示端口链接，直接打开链接就代表创建项目成功了。

如何搭建一个Vue项目和配置环境相关推荐

从零开始搭建一个vue项目 -- vue-cli/cooking-cli（一）
从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一) 1.vue-cli搭建一个可靠成熟的项目 1.介绍 vue-cli 我是去年六月份接触的vue1.0,当时还是个菜逼,当 ...
MacOS 搭建一个vue项目(完整步骤)
搭建一个Vue项目一.安装node环境二.搭建vue项目环境 1.全局安装vue-cli 2.检查是否安装成功 3.创建一个基于 webpack 模板的新项目 4.安装依赖 5.启动项目三.vu ...
手把手教你从0开始搭建一个vue项目（完结）
前言上一节webpack实战之(手把手教你从0开始搭建一个vue项目)最后我们完成了css样式的配置: webpack.config.js: const path = require("p ...
vue入门级教程从零搭建一个vue项目
一.安装node环境 1.下载地址为:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3.为了提高我们的效率,可以使用淘宝的镜像:ht ...
多个vue项目合并成一个_零基础搭建一个Vue项目，你学会了吗？
这几天利用业余时间做了一个个人项目,后端部分已经搭建好了还差一个前端,经过考虑前端利用Vue来搭建开发,因对Vue不是很熟悉,所以利用网络查找了相关的资料,成功的跑出了第一个Vue页面,写在此作为一个 ...
抛开vue-cli 利用requireJS搭建一个vue项目
---恢复内容开始--- 现在学习vue都是利用脚手架vue-cli快速搭建一个项目,这是非常高效的方法,我是十分推荐的,但是有时候在没有互联网的情况,我们没办法在node环境下,敲一个nmp ins ...
搭建一个Vue项目(完整步骤)
一.安装Node环境具体请参考:http://www.dinganan.cn/nodej安装和配置/ 二.搭建vue项目环境 1.全局安装vue-cli npm install --global v ...
如何搭建一个Vue项目
一.在搭建前,首先检查自己的搭建环境使用cmd,打开命令行,使用node -v指令,查看自己的node版本(是否安装) 使用npm -v指令,查看自己的npm版本(是否安装) 二.搭建Vue项目环境 ...
如何利用webpack4.0搭建一个vue项目
作为一个初学者,记录自己踩过的坑是个好的习惯.我本身比较懒,这里刚好有时间把自己的搭建过程记录一下这里是参考文章 https://www.jianshu.com/p/1fc5b5151abf 文 ...

如何搭建一个Vue项目和配置环境

如何搭建一个Vue项目和配置环境相关推荐

最新文章

热门文章