1, Initializing the Project
vue-cli is the official project scaffold released by Vue; using vue-cli, you can quickly create a Vue + Webpack project.
1
2
3
4
5
6
7
8
9
10
| npm install -g vue-cli
# Install vue-cli globally
vue init webpack myproject
# Create a vue project; when it runs, it prompts for information about the project
cd myproject
# Enter the project
npm install
# Install the dependency packages; a new node_modules folder is created and the packages are installed there
npm run dev
# Run locally, by default at http://localhost:8080, starting the service
|
2, Directory Structure
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| |--build //folder for webpack-related code
| |--build.js //build code for the production environment
| |--check-version.js //checks node, npm and other versions
| |--dev-client.js //hot-reload related code
| |--dev-server.js //local server
| |--utils.js //build utilities
| |--vue-loader.conf.js //vue loader
| |--webpack.base.conf.js //basic webpack configuration
| |--webpack.dev.conf.js //webpack development environment configuration
| |--webpack.test.conf.js //webpack test environment configuration
| |--webpack.prod.conf.js //webpack production environment configuration
|--config //project development environment configuration
| |--index.js //basic project configuration
| |--dev.env.js //development environment variables
| |--test.env.js //test environment variables
| |--prod.env.js //production environment variables
|--src //project source code directory
| |--assets //assets directory
| |--components //components directory
| |--router //router directory
| |--APP.vue //page entry file
| |--main.js //program entry file, loads the various common components
|--static //static file directory, e.g. css, images and other static files
|--index.html //entry file
|--test //unit test file directory
|--package.json //basic project information
|--README.md //project description
|
3, Adding a Page
The development workflow is illustrated below with an example of adding a page.
3.1, Adding a Page Template
In the src/compoents directory, create a new file Home.vue as the page displayed for the /home route.
Home.Vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <template>
<div class="home">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
msg: "I am Home Page",
};
},
};
</script>
<style scoped>
h1,
h2 {
font-weight: normal;
}
</style>
|
Rendering a page template is mainly divided into three parts:
- template. The HTML Dom structure, the content displayed on the page.
- script. The Vue logic code, the front-end js.
- style. The style content; scoped means it only takes effect in this template.
3.2, Adding a Page Route
In the src/router directory, add the following to index.js.
Added to index.js
1
2
3
4
5
6
7
8
9
10
11
| import Home from "@/components/Home";
export default new Router({
routes: [
{
path: "/home",
name: "home",
component: Home,
},
],
});
|
This way, http://localhost:8080/#/home routes to the Home.vue page. Note that the route here starts after the #.
4, Building and Compiling
In the project directory, use npm to run build, and the packaging and compiling for the production stage is done.
1
2
| cd myproject
npm run build
|
The output path of the files generated by the build is specified by the assetsRoot and assetsSubDirectory parameters in config/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
| dist
|-- index.html
`-- static
|-- css
| |-- app.css # styles
| `-- app.css.map
`-- js
|-- app.js # mainly the compiled content of the vue template
|-- app.js.map
|-- manifest.js #on top of vendor, further extracts the parts that change frequently, such as content related to asynchronously loaded js modules
|-- manifest.js.map
|-- vendor.js # the code block extracted through the common module extraction plugin (the modular code part that webpack itself provides)
`-- vendor.js.map
|
About map files: the .map file is only loaded when the console (F12) is opened. Usually the js and css code in a production environment is minified, so one file may only have a few lines of code but each line has thousands of characters. This is very bad for debugging code; the map file is used to debug the code and locate lines of code.
