Separating the front and rear ends vue-cli project build system explain mac

The front end of the project to build the necessary technology 

webpack 

nodejs build  

Installation vue-cli 

Learn more self-installation technology

One: Create a project using the front end of the scaffolding vue-cli 

1: The terminal performs the following command

vue init webpack my-vue create a my-vue project

2: cd to the project path execute the following command to start the project

npm install install the prerequisite dependencies 

npm run dev project start 

Introduction Second project directory

1: project directory

2: The following describes each directory under

build directory for webpack package to build the project js file

Port configuration file config file directory to store items, such as run-time project start

When will be generated when you create a project need to test when the test js files that begin with

node_modules files and subdirectories 

Inside this folder are all some basic node dependencies, when we expand to install some other plug-ins will be installed in this folder.

 

src files and subdirectories (focus)

This folder is the main file of the entire project folder, most of our code are done here

assets folder inside the main place a number of resource files. For example, js, css files and the like.

The actual development might create a folder to store various requests such as api js files alone

components folder can be said vue soul, and all component files can be placed there.

Components! Vue assembled a project that consists of a number of components together.

Note that the most common components put here some large-scale projects will then be made for each individual page components on custom

Page components such as folder views

 

router folders and subdirectories (focus)

This folder is the routing of the entire project vue, vue on behalf of single-page application, there is a settings file addresses a component.

Usually only one file index.js

 

app file 

This file is an entry file of the entire project, equivalent to the outermost div wrapping the entire page.

It can be understood as the largest component 

main.js file 

This file is the main js project, global variables used, js, plug-ins are incorporated herein defined

 

 

 static 文件夹 专门存放一些静态资源 如工具类 url等

初次意外 开发中 通用的插件一般也会定义在src 目录下 

所以src 这个目录 非常重要

3:其他配置文件

index.html 项目的承载页面

package.json 文件是整个项目用的到的所有的插件的json的格式 比如 这个插件的 名称 , 版本号。

当在项目里使用npm install 时 node 会自动安装, 这个文件里的所有插件。

剩下的不用管

最后总结下这个最基本的vue 项目结构

 

 

Guess you like

Origin www.cnblogs.com/doudi/p/11269527.html