Vue-cli脚手架快速搭建项目

 

一、前言

“脚手架”是一种元编程的方法，用于构建基于数据库的应用。许多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项目的基本过程，希望对你有所帮助。欢迎关注同步微信公众号：前端小菜的进阶之路