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 项目结构