vue项目搭建,vue项目搭建首页

首页 > 经验 > 作者:YD1662022-11-03 22:16:59

由于我们项目用的是vue开发的 今天先穿插一个vue项目的搭建步骤,不过现在好多都是从网上找个现成的框架,然后在这个基础上开发(包括我们自己的项目)。但是我们也需要了解一下怎么搭建一个简单的vue项目.

需要按照node环境

1、node的下载地址为:https://nodejs.org/en/ 然后直接就一路安装就可以了,一般没啥事情。如果不放心可以在命令行执行命令node -v 看一下如果显示了版本号就说明安装成功了

如图:

vue项目搭建,vue项目搭建首页(1)

搭建vue项目环境

1、安装vue-cli

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性

执行命令 npm install -g vue-cli

2、创建项目

进入你的工作空间目录,创建一个基于 webpack 模板的新项目:

命令为:“vue init webpack 项目名” 如 vue init webpack vue-test

执行命令效果如下:

vue项目搭建,vue项目搭建首页(2)

对其中的一下命令说一下:

Project name 输入你的项目名称

Project description 输入你的项目描述

Author 这个是项目的作者

其他配置项目

a、Vue build 打包方式,不用管直接回车即可;

b、Install vue-router 安装路由,项目中肯定要使用到 所以y 回车就行;

c、Use ESLint to lint your code js 语法检测 这个要求比较严格 我们项目中都是直接关闭的直接就n回车,如果你感觉不确定就配置也行y回车 以后如果不用的话在关闭;

d、Set up unit tests 单元测试工具 不需要 直接 n 回车;

e、Setup e2e tests with Nightwatch 是否需要 端到端测试工具 不需要 所以 n 回车;

这样一个基本的项目就搭建完成了 可以看一下项目的目录结构:

vue项目搭建,vue项目搭建首页(3)

启动项目

切换到项目目录下执行命令:

1、安装项目使用的插件 npm install

2、启动项目 npm run dev 执行完如下:

vue项目搭建,vue项目搭建首页(4)

这个时候你可以在浏览器中打开网页http://localhost:8080/ 如下:

vue项目搭建,vue项目搭建首页(5)

这基本上就是一个最简单的vue项目的搭建过程 剩下的就是咱们的业务逻辑功能了

3、项目的打包命令

开发完一个vue项目 需要打包成对应的文件 执行命令npm run build 这个时候在目录下会生成一个dist的文件夹 这个文件夹里面的文件就是我们最终的打包文件可以直接放到我们的服务器上就可以。

当然了这里面还有其他的配置。我们接下来回慢慢的学习。

祝愿大家新的一年里面都能进步,月月加薪。

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.