创建前先了解几个知识点:

         node.js

Node是一个让JavaScript运行在服务端的开发平台,使用JavaScript也可以开发后台服务,说明白就是它仅仅是一个平台,我们使用Vue开发必须要安装Node.js。

         npm

npm是Node.js官方提供的包管理工具,它已经成了Node.js包的标准发布平台,用于Node.js包的发布、传播、依赖控制。npm提供了命令行工具,使你可以方便地下载、安装、升级、删除包,也可以让你作为开发者发布并维护包。我们可以直接使用npm命令下载我们所需要的jar包。

        vue-cli

Vue提供了一个官方的CLI,我们就叫它为脚手架。它为现代前端工作流提供了batteriesincluded的构建设置,只需要几分钟时间就可以运行起来并带有热重载、保存是lint校验,以及生产环境可用的构建版本。简单的说,就是我们使用vue-cli可以快速构建一个完整的Vue项目,直接可以运行的vue本地项目,我们在此基础上直接开发我们所需要的功能和代码即可。

Vue-cli自带了webpack

安装Vue所需的环境

1.安装node.js

       搜索node.js进入官网(Node.js),直接下载node.js安装即可 安装好后打开cmd控制台命令输入node -v,命令行显示node.js版本就安装成功

2.安装npm

        安装好node.js之后,npm自动安装好 打开cmd控制台输入npm -v,显示版本就安装成功

3.安装vue-cli

        进入cmd控制台,输入命令npm install -g vue-cli 安装vue-cli,安装好后,输入vue -V(注意V大写),显示版本即安装成功

创建Vue项目

1.打开cmd控制台,进入你想创建的项目的目录

进入目录,输入命令:  vue init webpack [project-name]

 project-name是你打算创建vue项目的名称   

 输入命令之后,cmd会自动下载webpack模板,然后出现几个关于项目信息配置的步骤,依次输入即可:

  • Project name:项目名称,此处你可以选择更改,直接按下回车键,自动默认为初始输入的项目名称test-project
  • Project description:项目描述,自己输入
  • Author:项目开发人员
  • Vue build:项目构建模式,默认即可,按下回车
  • Install vue-router:项目是否安装vue路由,选择yes,进行安装
  • Use ESLint to lint your code:是否选择ESLint开发验证功能,新手选择no
  • Set up unit tests:是否开启单元测试,建议选择y,在后期开发中一定会用到的
  • Pick a test runner:选择开启单元测试,就会有选择测试方式,默认即可
  • Setup e2e tests with Nightwatch:是否开启e2e测试,选择no
  • Should we run 'npm install' for you after the project has been created

Yes,use NPM:选择这个代表在项目初始化后,会自动使用NPM联机下载项目所需要的插件

Yes,use Yarn:择这个代表在项目初始化后,会自动使用Yarn联机下载项目所需要的插件

No,I will handle that myself:后期手动下载项目所需要插件

网速好,建议选择“Yes,use NPM”,网速不好,建议选择“No,I will handle that myself”

 2.安装插件

创建好Vue项目,cmd控制台进入Vue项目的目录输入命令npm install,开始自动下载项目所需插件。

 插件下载完成后,你讲会看到上面的完整项目目录

 3.运行项目

cmd进入到项目根目录,输入命令 npm run dev,如下图

 浏览器访问http://localhost:8080/,出现下图项目搭建成功,在此基础上开发自己想要的项目即可。

      

Logo

前往低代码交流专区

更多推荐