Introduction: What is VUE

Vue (pronounced vju/curliest, similar to View) is a set of progressive frameworks for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue’s core library focuses only on the view layer, making it easy to get started and integrate with third-party libraries or existing projects. On the other hand, when combined with modern toolchains and various supporting libraries, Vue is perfectly capable of providing drivers for complex, single-page applications.

Ii. VUE family barrel and project structure

Vue has a famous family bucket family, including vue-Router (router.vuejs.org), vuex (vuex.vuejs.org), vue-resource (github.com/pagekit/vue…). . Together with the build tool VUe-CLI, this is the core of a complete VUE project.

  • Vue – the router routing

The officially supported Vue-Router library is recommended for most single-page applications. More details can be found in the Vue-Router documentation.

Import and define the VUE module, the VUe-Router module, and the required components, in this case, the Goods, Ratings, and Seller components, respectively. Finally, if it is used in a modular project, routing functionality must be explicitly installed via vue.use (). Import Vue from ‘Vue’ importRouter from ‘vue-router’

Import Goods from ‘working @ / components/Goods/Goods; The import Ratings from ‘@ / components/Ratings/Ratings; The import Seller from ‘@ / components/Seller/Seller;

Vue.use(Router); Const Router = new VueRouter () to define a route and pass in the corresponding configuration, including path and component components. Finally, when using newVue to create and mount the vue root instance, remember to inject routes through the Router configuration parameter, that is, routing objects exported from the router to enable routing throughout the application.

  • Vuex status management

Vuex is a state management mode + library for vue.js applications. It acts as a centralized store for all the components in your application, and its rules ensure that state can only change in predictable ways. It also integrates with Vue’s official DevTools extension to provide advanced features such as zero-configuration time travel debugging and state snapshot export/import.

State: data source in VUEX. The data we need to save is stored here. You can obtain the data defined by this.$store. State in the page.

Getters: A Getter is equivalent to a computed property in VUE. The return value of the Getter is cached according to its dependencies and recalculated only when its dependencies change. Here, we can obtain this value by defining the Getter of VUex. Getters can be used to listen for changes in values in state and return computed results.

Mutations: We have the data on the page, but what if we need to change the count value? The only way to change a value in the store is to commit mutation to change it. We now add two buttons in the Hello World. Here we click the button to call addFun (the method that performs the addition) and reductionFun (the method that performs the subtraction), and then directly submit the method changes in mutations inside.

Actions: We see that the value changes from 2 to -1 after three clicks; The value on the page is changed; We achieved the goal of changing the status value in the store. However, the authorities did not mind us directly changing the status value in the store. Instead, they asked us to submit an Actions, submit mutation in the actions and change the status value. Start by defining the actions to submit the mutation function.

MapState, mapGetters, mapActions: If we don’t like the idea of using “this. “Stroe.state. count” and “this.stroe.state.count” and “this.stroe.state.count” and “this.store.dispatch(‘funName’)” are long, Then we can use mapState, mapGetters, mapActions and it won’t be so troublesome;

  •   vue-resource

Vue-resource is small, supports IE9 and beyond, and supports the Promise feature. It is also recommended to use NPM to install vue-Resource. $NPM install vue-resource After vue-resource is installed and introduced, HTTP can be used based on global VUE objects, or HTTP can be used based on a vUE instance.

 

 

After the request is sent, the result of the response is processed using the THEN method, which takes two arguments, the first being the callback function if the response succeeds and the second being the callback function if the response fails. Vue-resource’s request API is designed in the REST style and provides seven request apis: · get(url,[options]) · head(URL,[options]) · delete(URL,[options]) · jsonp(url,[options]) · post(url,[body], [options]), put (url, [body], [options]), patch (url, [body], [options])

  • Vue – CLI Vue scaffolding

In a Vue CLI project, @vue/cli-service installs a command called vue-cli-service. You can access this command from NPM scripts as vue-cli-service, or from the terminal as./node_modules/. Bin /vue-cli-service.

  1. . Install the vue – cli

    Install webPack globally using NPM (node installation required), open command line tool, and enter: NPM install webpack -g or (NPM install -g webpack). After the installation is complete, enter webpack -v as shown in the following figure. If the corresponding version number is displayed, the installation is successful.

  2. Build the project with VUe-CLI

    ① I first create a folder (DXL_vue) on disk D as the project directory, and then use the command line CD to enter the project directory:

    vue init webpack baoge 
Copy the code

    Baoge is a customized project name. After the command is executed, a project folder named baoge is generated in the current directory.

    After entering the command, several options are presented for you to answer:

    • Project name (baoge) : —– project name, enter the default name in parentheses (Sorry, name can no longer contain capital letters), You can refer to it.
    • Project Description (A vue.js Project) : —- Project description, or directly click Enter, using the default name
    • Author () : —- Author, enter your name and the user will then choose:
    • Runtime + Compiler: recommended for most users Runtime + Compiler: recommended for most users about 6KB lighter min+gzip, But templates (or any ue-specificHTML) are ONLY allowed in. Vue files-render functions are required elsewhere ONLY when running, I already have a recommendation and I’ll go with the first one
    • Install vue-router? (Y/n) Indicates whether to install vue-Router. This is the official route and is used in most cases. Enter Y and press Enter.
    • Use ESLint to lint your code? (Y/n) Whether to use ESLint to manage code. ESLint is a code style management tool that is used to unify code styles and is used in general projects. Pick an ESLint preset (Use arrow keys), the code style for writing Vue projects, and press Y to preset
    • Setup unit tests with Karma + Mocha? (Y/n) Whether to install unit tests, I choose install Y enter
    • Setup e2e tests with Nightwatch(Y/n)? To determine whether to install the E2E test, I select INSTALL Y and press Enter

  3. NPM install: Install all modules. If you want to install a specific module, enter the name of the module after install. Simply typing install will install the modules that depend on the package.json file in the root directory of the project (this file is not allowed to have any comments), which is available in every NPM managed project and is the entry file for NPM operations. Since it was an initial project, I didn’t have any modules yet, so I used NPM Install to install all the modules. After the installation is complete, there will be a new node_modules folder in the directory, where all the dependent modules will be stored.

  4. Start the project

    npm run dev
Copy the code

    If the page is not loaded after the browser is opened, the local port 8080 May be occupied, so you need to modify the index.js in the config file. If the project is debugged locally, It is recommended to change the path prefix of assetsPublicPath in build to ‘./ ‘(the path starts with’/’), because after packaging, if the path starts with ‘/’, the js and CSS files imported from outside cannot be found locally (no problem on the server). So if you want to open the packaged file locally, you have to change the file path.

  5. Note: When debugging vUE pages, be sure to download a VUe-tool extension from the Google Store.

  6. Vue-cli webpack configuration analysis

           

    • frompackage.jsonYou can see the entrance to the development and production environments.
    • Can be seen in the dev Settings, build/webpack. Dev. Conf., js, the file is a development environment webpack configuration of the entrance
    • In webpack.dev.conf.js comes webpack.base.conf.js, which is the common WebPack configuration for development and production environments, and even test environments. It is fair to say that this document is quite important.
    • And config/index, js, build/utils, js, build/build js, specific look at the introduction: segmentfault.com/a/119000000…

7. Put your own project files in the SRC folder. After the project is developed, you can type NPM Run Build to do the packaging. npm run build

**save The installation package information is added to devDependencies. Save-dev The installation package information is added to devDependencies

After the package is complete, the dist folder will be generated. If you have changed the file path, you can directly open the local file to view it. When the project goes live, all you need to do is put the Dist folder on the server.

Iii. Vue project directory structure

**** Below is the general structure of a simple VUE project. Here is a brief overview of what is typically stored in each folder.

The Components/folder holds Vue components. Node_modules/ NPM vuex/ is a repository for vuex store (state objects, actions, etc.). Mutations router/ folder stores vue-router configuration items. The build/ file is a package of webpack configuration files. The static/ folder stores some static, less variable image or CSS files Dist/this folder does not exist at the beginning. App.vue root component will be produced after our project is built. All sub-components will be referenced in this folder. This will reference the JS logic of our root component app.vue main.js entry file, which will be injected into index.html after webpack is packed