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

Editor to share with you how to use vue-cli2.9.3, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

First, install vue-cli

1. Use npm to install vue-cli globally (if you have installed nodejs, otherwise you won't even be able to use npm), the command is as follows:

Npm install vue-cli-g

two。 You can use vue- V to view the version number of vue-cli. Notice that the V here is capitalized. If the vue- V command can display the version number, it means that vue-cli has been successfully installed on our computer.

3. At the same time, several files will be generated in the C:\ Users\ xxx\ AppData\ Roaming\ npm directory:

II. Initialize the project

1. Initialize the project with the vue init command:

Vue init

Indicates the name of the template. Vue-cli officially provides us with five templates:

Webpack- a comprehensive webpack+vue-loader template, features including thermal loading, linting, detection and CSS extension.

Webpack-simple- a simple webpack+vue-loader template, with no other features, allows you to quickly build a vue development environment.

Browserify- a comprehensive Browserify+vueify template, features including thermal loading, linting, unit detection.

Browserify-simple- a simple Browserify+vueify template, with no other features, allows you to quickly build a vue development environment.

Simple- is one of the simplest single-page application templates.

Indicates the name of the project, which you can name according to your own project.

two。 In actual development, we usually use webpack as a template, so we also install this template here and enter the following command on the command line:

Vue init webpack vuecli_demo

After entering the command, we will be asked for several simple options, and we can fill in them according to our own needs.

Project name: project name. Enter directly if you don't need to change it. Note: uppercase cannot be used here

Project description: project description. Default is A Vue.js project. Enter directly without writing.

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

Install vue-router? We need to install the routing plug-in for vue, so select y.

Use ESLint to lint your code? Whether to use ESLint to limit your code errors and style. We do not need to enter n here, if you are a large team developer, it is best to configure it.

Setup unit tests with Karma + Mocha? Whether we need to install the unit test tool Karma+Mocha, we don't need it here, so enter n.

Setup e2e tests with Nightwatch? We don't need to install e2e for user behavior simulation test here, so enter n.

After waiting for a period of time, the successful installation is shown as follows:

3. Enter the project directory cd vuecli_demo

The directory structure is as follows

Run our program in 4.npm run dev (or npm start) development mode. It automatically builds a server environment for development and opens it in a browser, monitors our code changes in real time, and presents them to us in real time.

5. If you want to automatically open a web page after executing npm run dev (or npm start), you need to make the following settings:

III. Explanation of Vue-cli project structure

Because the version of the live update is different from what you choose to install (the directory structure with the template webpack listed here), what you see may be different from the one below.

The following project structure is the vue-cli@2.9.3 version

|-- build / / Project build (webpack) related code | |-- build.js / / production environment build code |-- check-version.js / / check node, Npm and other versions | |-- logo.png / / logo image | |-- utils.js / / build tool related | |-- vue-loader.conf.js / / vue-loader configuration | |-- webpack.base.conf.js / / webpack basic configuration | |-- webpack.dev.conf.js / / webpack development environment configuration | |-- webpack.prod.conf.js / / webpack production environment configuration | |-- config / / Project development environment configuration | |-- dev.env.js / / Development environment configuration | |-- index.js / / Project main configuration (including listening port) Packaging path, etc.) | |-- prod.env.js / / production environment configuration |-- src / / Source directory | |-- assets / / static resources | |-- components / / vue common components | |-- router / / vue routing | |-- App.vue / / page entry file | |-- main.js / / program entry file | |-- main.js / / program entry file | Load various common components |-- static / / static files, such as some images Json data, etc. |-- data / / data obtained from group chat analysis is used for data visualization |-- .babelrc / / ES6 syntax compilation configuration |-- .editorconfig / / defines the code format |-- .gitignore / / git upload the file format to be ignored |-- postcssrc.js / / post-loader plug-in configuration file |-- index.html / / entry page |-- package.json / / Project basic information |-- package-lock.json / / Lock the currently installed package dependencies |-- README.md / / Project description

1.BuildMurray-[webpack configuration]

Build file is mainly the configuration of webpack, the main startup file is webpack.dev.conf.js, when we enter npm run dev first start is webpack.dev.conf.js, it will check the node and npm version, load the configuration file, start the service.

2. ConfigFor-[vue project configuration]

Config files are mainly project-related configurations. What we often use is to configure listening ports, package output paths and names when ports conflict.

3. Nodewritten modulesMutual-[dependency package]

Node_modules contains project dependency packages, including many basic dependencies, and you can install other dependencies as needed. The installation method is to open cmd, enter the project directory, enter npm install [dependent package name], and enter enter.

In two cases, we install the dependencies ourselves:

(1) the dependency package is missing when the project is running: for example, css-loader used by the project to load external css, route jump vue-loader, etc. (example of installation method: npm install css-loader)

(2) install plug-ins, such as vux (WEUI-based mobile component library), vue-swiper (carousel plug-in)

Note: sometimes the specified dependent version is installed. You need to add the version number information after the dependency package name. For example, to install version 11.1.4 of vue-loader, enter npm install vue-loader@11.1.4.

4. SrcMurt-[Project Core document]

The core document of the project has been briefly explained before, and then we will focus on main.js and router.

Main.js-- [entry file]

Mainly introduce the vue framework, root components and routing settings, and define vue instances

Components: {App} in the following figure is the introduced root component App.vue

You can also introduce plug-ins later, of course, you have to install plug-ins first.

Router-- [routing configuration]

Under the router folder, there is an index.js, which is the routing profile

A route with a path of'/'is defined here, and the page corresponding to this route is the Hello component, so the Hello component is rendered when we access the http://localhost:8080/#/ in the browser url

Similarly, we can set up multiple routes, such as'/ index','/list', etc., of course, we have to introduce the component first, and then set the route for the component.

The above is all the contents of this article "how to use vue-cli2.9.3". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, 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.