由于我们项目用的是vue开发的 今天先穿插一个vue项目的搭建步骤,不过现在好多都是从网上找个现成的框架,然后在这个基础上开发(包括我们自己的项目)。但是我们也需要了解一下怎么搭建一个简单的vue项目.
需要按照node环境1、node的下载地址为:https://nodejs.org/en/ 然后直接就一路安装就可以了,一般没啥事情。如果不放心可以在命令行执行命令node -v 看一下如果显示了版本号就说明安装成功了
如图:
搭建vue项目环境1、安装vue-cli
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性
执行命令 npm install -g vue-cli
2、创建项目
进入你的工作空间目录,创建一个基于 webpack 模板的新项目:
命令为:“vue init webpack 项目名” 如 vue init webpack vue-test
执行命令效果如下:
对其中的一下命令说一下:
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 回车;
这样一个基本的项目就搭建完成了 可以看一下项目的目录结构:
启动项目切换到项目目录下执行命令:
1、安装项目使用的插件 npm install
2、启动项目 npm run dev 执行完如下:
这个时候你可以在浏览器中打开网页http://localhost:8080/ 如下:
这基本上就是一个最简单的vue项目的搭建过程 剩下的就是咱们的业务逻辑功能了
3、项目的打包命令
开发完一个vue项目 需要打包成对应的文件 执行命令npm run build 这个时候在目录下会生成一个dist的文件夹 这个文件夹里面的文件就是我们最终的打包文件可以直接放到我们的服务器上就可以。
当然了这里面还有其他的配置。我们接下来回慢慢的学习。
祝愿大家新的一年里面都能进步,月月加薪。