阅读 117

笔记-vue搭建简单本地项目

——摘抄自www.cnblogs.com/zuiyue_jing…

提要

  • 确保本地安装了node.js、npm、vue_cli。
  • Node 是一个让 JavaScript 运行在服务端的开发平台,使用JavaScript也可以开发后台服务。说明白些它仅仅是一个平台,我们使用vue开发必须要安装node.js。
  • npm 是 Node.js 官方提供的包管理工具,他已经成了 Node.js 包的标准发布平台,用于 Node.js 包的发布、传播、依赖控制。npm 提供了命令行工具,使你可以方便地下载、安装、升级、删除包,也可以让你作为开发者发布并维护包。我们可以直接使用npm 命令下载我们所需要的jar包。
  • Vue 提供了一个官方的 CLI,我们就叫它为脚手架。它为现代前端工作流提供了 batteries-included 的构建设置,只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。简单的说,就是我们使用vue-cli可以快速构建一个完整的vue项目,直接可以运行的vue本地项目,我们在此基础之上直接开发我们所需要的功能和代码即可。
  • webpack项目打包工具

步骤

  • 创建目录

  • 运行cmd,进入想要创建项目得指定目录。

  • 输入指令vue init webpack project-name****(****自定义项目名称)

  • 输入指令后,cmd会自动下载webpack模板,然后出现几个关于项目信息配置得步骤,依次选择就好

  • Project name:项目名称,此处你可以选择更改,直接按下回车键,自动默认为初始输入的项目名称。

  • 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”。

  • 项目创建之后,我们可以查看目录 *注意,红色框标记的文件夹,如果在创建项目时,没有选择“Yes,use NPM”,这个文件夹是不存在的。

  • 安装插件**(如果在创建项目时最后一步选择“Yes,use NPM”,此步骤可略过)**

  • cmd进入到项目根目录,输入命令npm install,开始自动下载项目所需插件。

  • 插件下载完成后,你将会看到上面得完整项目目录。

  • 运行项目

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

  • 浏览器访问http://loclhost:8080/,出现下图项目搭建成功,在此基础上开发自己想开发的项目就好。![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eabfd18f65b845e49183efd237ca0476~tplv-k3u1fbpfcp-watermark.webp)

文章分类
前端
文章标签