SpringBoot + Vue Build Blog (1)-Install vue-cli scaffolding

1. Environmental preparation

First, we need to install nodeJs on our development machine. If you are not sure whether you have installed it, you can use the following command to check:

node -v  #查看node版本，检查是否安装node
npm -v
yarn -v

If the version is displayed normally, it means that nodeJs has been installed. If not, you can visit the official website of node: http://nodejs.cn/download/ to download and install node.

2. Vue CLI global installation

Installation command:

npm install -g vue-cli   # -g 全局安装

Using npm may be slower. We can use cnpm - the domestic mirror of npm. The advantage of using cnmp is that it will be faster when downloading content in the future, but the downloaded package may not be the latest. Command to install cnpm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

There may be problems when using cnpm, and the download dependency fails. If you cannot continue, you can delete the dependency in the node_modules folder and execute the command to download the dependency again.

After the installation is complete, you can view the command usage of vue with the following command:

vue -h

Three, initialize the project

Initialization command:

vue init webpack vue-blog(项目名称/文件夹名称)

init: Means that I want to use vue-cli to initialize the project

<template-name>(webpack ): indicates the template name, vue-cli officially provides us with 5 templates,

webpack- a comprehensive webpack+vue-loader template with functions including hot loading, linting, detection and CSS extension.

webpack-simple- a simple webpack+vue-loader template, which does not contain other functions, allowing you to quickly build a vue development environment.

browserify- a comprehensive Browserify+vueify template, functions include hot loading, linting, unit detection.

browserify-simple- a simple Browserify+vueify template, does not contain other functions, can quickly build a vue development environment.

-simple : One of the simplest single-page application templates.

<project-name>(vue-blog): Identifies the name of the project, you can name it according to your own project.

Executing the command will start downloading a project with the specified name. We need to specify the following project parameters. Use the default project name directly, choose to install vue-router, ESLint is a code quality inspection tool, here I choose to install.

Project name: Project name, if you don’t need to change it, just press Enter. Note: Capitalization cannot be used here.

Project description: Project description, the default is A Vue.js project, press Enter directly, no need to write.

Author: Author, if you have an author who configures git, he will read it.

Install vue-router? Whether to install the routing plug-in of vue, select Y.

Use ESLint to lint your code? Whether to use ESLint to limit your code errors and style, it is best to configure.

Setup e2e tests with Nightwatch? Whether to install e2e to perform user behavior simulation tests.

Fourth, start the project

Enter the project folder and execute the dependent run command:

# 进入项目文件夹
cd vue-blog

# 运行项目-dev方式
npm run dev

After the project is successfully built, visit http://localhost:8080, you can see the following content, indicating that the deployment is complete.

Five, project file configuration introduction

build (initial configuration of webpack)

config (index.js--project configuration)

node_modules (project dependent modules, code base)

src (program file)

static (static file resource)

test (test code)

index.html (Entry to the project homepage)

|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热重载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- src // 源码目录
| |-- components // vue公共组件
| |-- store // vuex的状态管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- static // 静态文件，比如一些图片，json数据等
| |-- data // 群聊分析得到的数据用于数据可视化
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md // 项目说明
|-- favicon.ico
|-- index.html // 入口页面
|-- package.json // 项目基本信息
.