从0到1创建一个Vue项目
创建前先了解几个知识点:node.jsNode是一个让JavaScript运行在服务端的开发平台,使用JavaScript也可以开发后台服务,说明白就是它仅仅是一个平台,我们使用Vue开发必须要安装Node.js。npmnpm是Node.js官方提供的包管理工具,它已经成了Node.js包的标准发布平台,用于Node.js包的发布、传播、依赖控制。npm提供了命令行工具,使你可以方便地下载、安装、
创建前先了解几个知识点:
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/,出现下图项目搭建成功,在此基础上开发自己想要的项目即可。
更多推荐
所有评论(0)