一、前言
“脚手架”是一种元编程的方法,用于构建基于数据库的应用。许多MVC框架都有运用这种思想。
是不是感觉很高大上的样子,好吧,其实说直白点就是:别人共享出来的,可以快速帮你搭建一个项目的基础架子,你可以在上面添砖加瓦,以满足你的需求。这篇博文要介绍的为vue-cli2.x版本的。
二、准备工作
node安装
在node官网,下载安装包,然后一路点击next,即可进行傻瓜式安装。安装完成后可以,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功:如下
当然也可以参考我之前的文章windows系统下如何安装多版本node,进行多版本的安装
webpack的安装
安装完成node之后,我们就可以使用node自带的包管理工具,全局安装webpack了,命令行为:npm install webpack -g,此时默认安装最新版本。
注意:webpack 4.X 开始,需要安装 webpack-cli 依赖 ,所以使用这条命令: npm install webpack webpack-cli -g
vue-cli安装
全局安装vue-cli,在cmd中输入命令:
npm install -g vue-cli
安装完成后,输入 vue -V 记住 大写V ! 大写V ! 大写V !
vue -V
结果如下:
至此,环境准备工作已经结束了, 如果在上述操作中,遇到了问题,请自行去找百度哦
三、用vue-cli构建项目
-
生成项目
通过命令行,切换到项目的存放目录下,然后执行命令:
vue init webpack vue-webpack-demo
过程如下图
-
初始化,安装依赖
cd vue-webpack-demo npm install
到这一步,通vue-cli构建项目基本就完成了,当然这只是一个很基础的项目框架。
四、项目的运行
项目创建完成后,在根目录有一个package.json的文件中,有这样一个字段
1"scripts": {
2 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
3 "start": "npm run dev",
4 "lint": "eslint --ext .js,.vue src",
5 "build": "node build/build.js"
6 },
以上就是默认的几个项目相关的命令。
本地开发:npm run dev
执行命令npm run dev
然后在浏览器打开http://localhost:8080 ,会看到欢迎页:
到此,我们的demo就跑起来了,当然这只是在开发环境跑起来的。
打包上线:npm run build
执行命令npm run build,打包后会生成dist文件夹
打开dist文件夹下新生成的index.html文件,会发现页面空白,打开控制台会发现页面中引用的css和js文件都找不到。
说明引用路径错了,需要手动修改:
进入config/index.js
此时,再重新执行命令,即可运行成功了。
将来项目上线时,只需要将 dist 文件夹放到服务器就行了。
以上是基于vue-cli脚手架创建vue项目的基本过程,希望对你有所帮助。欢迎关注同步微信公众号:前端小菜的进阶之路