Shulou(Shulou.com)06/02 Report--

In this article Xiaobian for you to introduce in detail the "vue project construction needs which directories", detailed content, clear steps, details handled properly, I hope that this "vue project construction needs which directories" article can help you solve doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

Vue build required directories: 1, build (build script directory); 2, config (project configuration directory); 3, node_modules (project dependent module directory); 4, src;5, static (static resource directory); 6, components (component directory), and so on.

The operating environment of this tutorial: windows7 system, vue2.5.2 version, DELL G3 computer.

VUE project build and directory description

First, install node environment

1. Download from: https://nodejs.org/en/

2. Check whether the installation is successful: if the version number is output, it means that we have successfully installed the node environment

3. In order to improve our efficiency, we can use Taobao's image: http://npm.taobao.org/

Enter: npm install-g cnpm-registry= https://registry.npm.taobao.org, you can install the npm image, and then replace it with cnpm where you use npm later.

Check that the installation is successful:

Second, set up the vue project environment

1. Install vue-cli globally

Npm install-global vue-cli

2. Enter your project directory and create a new project based on the webpack template

Description:

Vue build = = > packing method, you can enter

Install vue-router = = > whether to install vue-router or not, it must be used in the project, so enter Y

Use ESLint to lint your code = = > whether we need js syntax checking, we don't need it at present, so enter n

Set up unit tests = = > whether to install the unit test tool or not, we don't need it at present, so enter n

Setup e2e tests with Nightwatch = = > whether we need end-to-end testing tools or not, we don't need them at present, so enter n

3. Enter the project: cd vue-demo, install dependencies

After successful installation, there will be one more directory in the project folder: node_modules

4. Npm run dev, start the project

The project was launched successfully:

III. Explanation of vue project catalogue

1. Build: build script directory

1) build.js = = > production environment build script

2) check-versions.js = = > check the npm,node.js version

3) utils.js = = > build related tools and methods

4) vue-loader.conf.js = = > configure the css loader and add the prefix automatically after compiling css

5) webpack.base.conf.js = > webpack basic configuration

6) webpack.dev.conf.js = > webpack development environment configuration

7) webpack.prod.conf.js = > webpack production environment configuration

2. Config: project configuration

1) dev.env.js = = > Development environment variables

2) index.js = = > Project profile

3) prod.env.js = = > production environment variables

3. Project dependency module loaded by node_modules:npm

4. Src: here is the directory we want to develop, and basically everything we need to do is in this directory. It contains several directories and files:

1) assets: resource directory, place some images or public js or public css. The resources here will be built by webpack

2) components: the component directory in which the components we wrote are placed

3) router: front-end routing. The routing path we need to configure is written in index.js.

4) App.vue: root component

5) main.js: import js file

5. Static: static resource directory, such as pictures, fonts, etc. Will not be built by webpack

6. Index.html: home page entry file, you can add some meta information, etc.

7. Package.json:npm package configuration file, which defines the project's npm script, dependency package and other information.

8. README.md: description of the project in markdown format

9. .xxxx files: these are some configuration files, including syntax configuration, git configuration, etc.

Start our first vue project

1. Create a new views directory under the components directory and write our vue components in it.

1) start our first component:

A: create a new First.vue under the views directory

B: configure the routing path in index.js under the router directory

C:template write html,script write js,style write style

D: enter ip: http://localhost:8010/#/first to view the page effect

Note:

There can be only one side-by-side p under a component. The following is an error:

The data should be written in return, not like a document, which is miswritten as follows:

2. Talk about parent and child components

1) create a new sub folder under the components directory to store the reusable subcomponents. For example, create a new Confirm.vue component

3) introduce child components into the parent component

Introduction: import Confirm from'.. / sub/Confirm'

Registration: add components: {Confirm} after the name code block in the tag

Use: add in

Complete code:

2) parent-child component communication

Subcomponents:

Parent component:

3. Use routing to build a single-page application

1) create a new Second.vue component according to the above method

2) Route Jump: go to the second page

After the route jumps, pay attention to the path changes:

As you can see, it is parsed into a tag in html

4. How to write styles with less

1) install less dependency: npm install less less-loader-- save

After the installation is successful, you can see that 2 more modules have been added in package.json:

2) write less

5. Supplement

1, solve the problem that vue can not automatically open the browser: when we enter npm run dev, run the project, the command line prompts us to run successfully, but the browser does not open automatically, can only enter it manually.

Resolve:

1) Open config = > index.js

2) autoOpenBrowser is found in the module.exports configuration. The default setting is false.

3) change autoOpenBrowser to true

4) Ctrl+C, and then if we restart it, we can automatically open the browser

2. To avoid port conflicts, you can also modify port and open the directory as above.

Modified successfully:

After reading this, the article "what catalogs are needed for vue project construction" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.