current position:Home>Vue cli initialization creates vue2 9.6 project

Vue cli initialization creates vue2 9.6 project

2022-04-29 20:39:14Know its black and accept its white

vue-cli install

see node edition

PS E:\node> node -v
v11.15.0
PS E:\node>

vue-cli yes vue Official scaffold for quickly building single page applications , It's integrated with webpack,npm,nodejs,babel,vue,vue-router.

Global scaffold installation

PS E:\node> npm install vue-cli -g
npm WARN deprecated vue-[email protected]2.9.6: This package has been deprecated in favour of @vue/cli
npm WARN deprecated [email protected]2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated coffee-[email protected]1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN deprecated har-[email protected]5.1.5: this library is no longer supported
npm WARN deprecated [email protected]3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
C:\Program Files\nodejs\vue-init -> C:\Program Files\nodejs\node_modules\vue-cli\bin\vue-init
C:\Program Files\nodejs\vue -> C:\Program Files\nodejs\node_modules\vue-cli\bin\vue
C:\Program Files\nodejs\vue-list -> C:\Program Files\nodejs\node_modules\vue-cli\bin\vue-list
+ vue-[email protected]2.9.6
added 245 packages from 230 contributors in 27.375s

PS E:\node>

see vue edition

PS E:\node> vue --version
2.9.6
PS E:\node>

vue-cli Initialize create project

1、vue init Command to explain

use vue init Command to initialize the project , The specific use method is as follows :

vue init <template-name> <project-name>

init: Means to use vue-cli To initialize the project .

<template-name>: Represents the template name ,vue-cli Official 5 Kind of template :


1、webpack:
A comprehensive webpack+vue-loader The template of , Functions include hot loading ,linting, Detection and CSS Expand .

2、webpack-simple:
A simple webpack+vue-loader The template of ,
No other functions , Let you quickly build vue Development environment of .

3、browserify:
A comprehensive Browserify+vueify The template of , Functions include hot loading ,linting, Unit detection .

4、browserify-simple:
A simple Browserify+vueify The template of ,
No other functions , Let you quickly build vue Development environment of .

5、simple: One of the simplest single page application templates .

<project-name>: Identify the project name , Users choose names according to their projects .


2、 Initialize create project

In actual development , Generally used webpack This template , The command is used as follows :

PS E:\node> vue init webpack vue296

? Project name vue296
? Project description A Vue.js project
? Author wgchen
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "vue296".


# Installing project dependencies ...
# ========================

npm WARN deprecated babel-[email protected]8.2.6: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated eslint-[email protected]1.9.0: This loader has been deprecated. Please use eslint-webpack-plugin
npm WARN deprecated extract-text-webpack-[email protected]3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated html-webpack-[email protected]2.30.1: out of support
npm WARN deprecated [email protected]2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated uglify-[email protected]3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0
npm WARN deprecated bfj-[email protected]5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated [email protected]2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated core-[email protected]2.6.12: core-[email protected]<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated [email protected]1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated [email protected]1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated [email protected]3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]0.7.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated circular-[email protected]0.3.3: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated [email protected]0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated source-map-[email protected]0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated resolve-[email protected]0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-[email protected]0.4.1: See https://github.com/lydell/source-map-url#deprecated

> core-[email protected]2.6.12 postinstall E:\node\vue296\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> [email protected]2.7.4 postinstall E:\node\vue296\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)


> es5-[email protected]0.10.61 postinstall E:\node\vue296\node_modules\es5-ext
>  node -e "try{require('./_postinstall')}catch(e){}" || exit 0


> uglifyjs-webpack-[email protected]0.4.6 postinstall E:\node\vue296\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]~2.3.2 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]2.3.2: wanted {
    "os":"darwin","arch":"any"} (current: {
    "os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]^1.2.7 (node_modules\watchpack-chokidar2\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]1.2.13: wanted {
    "os":"darwin","arch":"any"} (current: {
    "os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]^1.2.7 (node_modules\webpack-dev-server\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]1.2.13: wanted {
    "os":"darwin","arch":"any"} (current: {
    "os":"win32","arch":"x64"})

added 1397 packages from 715 contributors in 66.359s


Running eslint --fix to comply with chosen preset rules...
# ========================


> [email protected]1.0.0 lint E:\node\vue296
> eslint --ext .js,.vue src "--fix"


# Project initialization finished!
# ========================

To get started:

  cd vue296
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack


PS E:\node>

cd Command to enter the project directory

PS E:\node> npm run start

 DONE  Compiled successfully in 19319ms                                                      10:17:28

 I  Your application is running here: http://localhost:8080

Access page

http://localhost:8080

 Insert picture description here

package.json

{
    
  "name": "vue296",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "wgchen",
  "private": true,
  "scripts": {
    
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },
  "dependencies": {
    
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

Project structure

One vue-cli The project structure is as follows , among src Folders need to be mastered , The rest can be understood .
The folder directory is as follows :
 Insert picture description here

1、build Catalog (webpack To configure )

build The files are basically webpack Configuration of , The contents are as follows :
 Insert picture description here

2、config Catalog (vue Project configuration directory )

config The files are mainly project related configurations , Commonly used is to configure the listening port in case of port conflict , Packaging output path and naming, etc , The contents are as follows :
 Insert picture description here

3、node_modules( Project dependency package )

node_modules Inside is the project dependency package , This includes many basic dependencies , You can also install other dependencies as needed .

The installation method opens the command tool , Enter project directory , Input npm install [ Dependent package name ], enter .

Installation dependency :npm i

In both cases, we will install the dependencies ourselves :

》 The dependent package is missing from the project run
》 Installing a plug-in : Such as vuex

PS: Sometimes the specified dependent version is installed , You need to add the version number information after the dependent package name ,
Such as npm install [email protected]

src Explanation of project core documents

The core file directory has been described earlier , Now I will focus on :
index.html,main.js,App.vue,router Of index.js,HelloWorld.vue.

The home page of the project E:\node\vue296\index.html

Project directory :vue296、index.html Root file

index.html Home page for the project , With others html equally , But generally only an empty root node is defined , stay main.js The instance defined inside will be mounted under the root node , The content passes vue Component to fill .

The explanation is as follows :
 Insert picture description here

Entrance file E:\node\vue296\src\main.js

main.js Entry file for project , Single entry , Mainly to introduce vue frame , Root component and routing settings , And define vue example , The explanation is as follows :
 Insert picture description here

The root component E:\node\vue296\src\App.vue

 Insert picture description here

Routing configuration E:\node\vue296\src\router\index.js

router Under the folder , There is one index,js Routing profile for , The explanation is as follows :
 Insert picture description here

Page components E:\node\vue296\src\components\HelloWorld.vue

 Insert picture description here

Initialize the project application

The basic application of routing

stay html Use in label router-link Jump , Corresponding to hyperlinks a label , Use as follows :

E:\node\vue296\src\components\HelloWorld.vue

<template>
  <p> Navigation  :
    <router-link to="/"> home page  {
    {
     msg }} </router-link> <br/>&nbsp;&nbsp;
    <router-link to="/hello">  Single page  hello</router-link>
  </p>
</template>

<script>
export default {
    
  name: 'HelloWorld',
  data () {
    
    return {
    
      msg: 'HelloWorld'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
a {
    
  text-decoration:none;
}
</style>

 Insert picture description here
 Insert picture description here

Add components and access through routing

add to Hello Component and return to the root component on the component page .

E:\node\vue296\src\router\index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//  Import components 
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
    
  routes: [
    /* home page */
    {
    
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    /* Add route */
    {
    
      path: '/hello',
      name: 'Hello',
      component: Hello
    }
  ]
})

newly build Hello Components
E:\node\vue296\src\components\Hello.vue

<template>
  <p>{
    {
     msg }}  page  :
    <button @click="goHome"> Back to the front page </button>
  </p>
</template>

<script>
export default {
    
  name: 'Hello',
  data () {
    
    return {
    
      msg: 'Hllo'
    }
  },
  methods: {
    
    /* Programming navigation -JS Jump inside the code */
    goHome(){
    
        this.$router.push('/');
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
a {
    
  text-decoration:none;
}
</style>

 Insert picture description here

Sub route - Route nesting

Sub route , Also called route nesting , Used in children Followed by a routing array ,
The routing in the array is basically the same as that in other configurations , Need configuration path and component,
Then add... In the corresponding section <router-view/> To show sub page information , Equivalent to embedding iframe .

Add child route

File path :E:\node\vue296\src\router\index.js

add to One、Two Components to Hello Sub routes under components .

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/Hello'
import One from '@/components/One'
import Two from '@/components/Two'

Vue.use(Router)

export default new Router({
    
  routes: [
    {
    
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
    
      path: '/hello',
      name: 'Hello',
      component: Hello,
      //  Nested sub routing 
      children: [
        {
    
          path: 'one', //  Subpage 1
          component: One
        },
        {
    
          path: 'two', //  Subpage 2
          component: Two
        },
      ]
    }
  ]
})

establish One.vue Components

E:\node\vue296\src\components\One.vue

<template>
    <div class="hello">
        <h1>{
    {
     msg }}</h1>
    </div>
</template>
<script>
export default {
    
    name: 'One',
    data () {
    
        return {
    
            msg: 'Hi, I am One Page!'
        }
    }
}
</script>

<style scoped>
</style>

establish Two.vue Components

E:\node\vue296\src\components\Two.vue

<template>
    <div class="hello">
        <h1>{
    {
     msg }}</h1>
    </div>
</template>
<script>
export default {
    
    name: 'Two',
    data () {
    
        return {
    
            msg: 'Hi, I am Two Page!'
        }
    }
}
</script>

<style scoped>
</style>

Hello.vue Add sub component display location

E:\node\vue296\src\components\Hello.vue

<template>
    <div>
        <p>
            {
    {
     msg }}  page  :
            <button @click="goHome"> Back to the front page </button>
        </p>
        <p>
            <router-link to="/hello/one"> Subpage 1</router-link> |
            <router-link to="/hello/two"> Subpage 2</router-link>
        </p>
        <!--  Sub page display part  -->
        <router-view/>
    </div>
</template>

<script>
export default {
    
  name: 'Hello',
  data () {
    
    return {
    
      msg: 'Hllo'
    }
  },
  methods: {
    
    goHome(){
    
        this.$router.push('/');
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
a {
    
  text-decoration:none;
}
</style>

The root component HelloWorld.vue

E:\node\vue296\src\components\HelloWorld.vue

<template>
  <p> Navigation  :
    <router-link to="/"> home page  {
    {
     msg }} </router-link> <br/>&nbsp;&nbsp;
    <router-link to="/hello">  Single page  hello</router-link>
  </p>
</template>

<script>
export default {
    
  name: 'HelloWorld',
  data () {
    
    return {
    
      msg: 'HelloWorld'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
a {
    
  text-decoration:none;
}
</style>

preview

 Insert picture description here

Knowledge point

One vue A page usually consists of three parts

 Templates  (template)
  js (script)
 style  (style)

The explanation is as follows :

<!--  Templates  -->
<template>
    <div id="app">
        <img src="./assets/logo.png">
        <router-view/>
    </div>
</template>

<!-- js Code  -->
<script> export default {
       name: 'App' } </script>

<!-- css style  -->
<style> #app {
       font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

[ template- Templates ]

(1) A template can only contain one parent node , In other words, the top floor div There can only be one
        ( Pictured above , Parent node is #app Of div, It has no sibling nodes )

(2) Is the sub route view slot , The following routing pages are displayed here , amount to iframe

[ script-JS Code ]

vue Usually use es6 To write , use export default export , It can contain data data,
Life cycle ( mounted etc. ), Method ( methods ) etc. .

[ style-CSS style ]

Style passed style label <style></style> The parcel , The default is to affect the global ,
You only need to define the scope of this component , You need to put... On the label scoped,

<style scoped>
...
</style>

Introduce the outside CSS Example :

<style>
    import './assets/css/public.css'
</style>

Vue Application in project vue-router

Vue Router yes Vue.js Official route manager .
It and Vue.js The core of deep integration , Make it easy to build a single page application .

The included features are :

		                  Nested routing / View table 、
		         Modular 、 Component based routing configuration 、
		              Routing parameters 、 Inquire about 、 wildcard 、
		   be based on  Vue.js  Transition system view transition effect 、
                           Fine grained navigation control 、
             With automatic activation  CSS class  Link to 、
HTML5  Historical patterns or  hash  Pattern , stay  IE9  Auto downgrade in 、
                           Custom scrollbar behavior 

install ( This project is in cli Created at the time of creation router There is no need to execute the command again )

vue-router It's a plug-in package , Need to use npm To install . If the vue-cli The build initialization project prompts you to install , You can also use the command to install :

npm install vue-router --save

Interpretation of core documents

use vue-cli After building the project , stay src/router/index.js In file , See the following routing core file :

//  introduce vue frame 
import Vue from 'vue'

//  introduce vue-router Routing dependency 
import Router from 'vue-router'

//  Introduce page components , Name it  HelloWorld
import HelloWorld from '@/components/HelloWorld'

// Vue Global use Router
Vue.use(Router)

//  Define routing configuration 
export default new Router({
    
  routes: [                  // Configure the routing , Here is an array 
    {
                            // Every link is an object 
      path: '/',             // Link path 
      name: 'HelloWorld',    // Routing name ,
      component: HelloWorld  // Corresponding component template 
    }
  ]
})

Use in the system entry file E:\node\vue296\src\main.js In the injection router, The code is as follows :

//  introduce vue frame 
import Vue from 'vue'

//  Introduce the root component 
import App from './App'

//  Introduce routing configuration 
import router from './router'

//  Turn off the prompt given in production mode 
Vue.config.productionTip = false

//  Define examples 
new Vue({
    
  el: '#app',
  router, //  Inject into the framework 
  components: {
     App },
  template: '<App/>'
})

Routing attribute configuration description

history And hash The difference between patterns :history Route none # Number

export default new Router({
    
    mode: 'history', // Routing mode , The value is  history  And  hash
    base: '/', // Package path , The default is /, You can modify 
    routes: [
    {
    
        path: string, // route 
        ccomponent: Component; // Page components 
        name: string; //  Named route - Routing name 
        components: {
     [name: string]: Component }; //  Name the view component 
        redirect: string | Location | Function; //  Redirect 
        props: boolean | string | Function; //  Routing components pass parameters 
        alias: string | Array<string>; //  Routing alias 
        children: Array<RouteConfig>; //  Nested sub routing 
        //  Route individual hooks 
        beforeEnter?: (to: Route, from: Route, next: Function) => void;
        meta: any; //  Custom label properties , such as : Do you need to log in 
        icon: any; //  Icon 
        // 2.6.0+
        caseSensitive: boolean; //  Whether the matching rule is case sensitive ?( The default value is :false)
        pathToRegexpOptions: Object; //  Compile regular options 
    }
    ]
})

The one after removing the port # Number

 Insert picture description here

add to

mode: 'history', //mode Pattern 

File path :E:\node\vue296\src\router\index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/Hello'
import One from '@/components/One'
import Two from '@/components/Two'

Vue.use(Router)

const router = new Router({
    
  mode: 'history', //mode Pattern 
  routes: [
    {
    
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
    
      path: '/hello',
      name: 'Hello',
      component: Hello,
      //  Nested sub routing 
      children: [
        {
    
          path: 'one', //  Subpage 1
          component: One
        },
        {
    
          path: 'two', //  Subpage 2
          component: Two
        },
      ]
    }
  ]
})

export default router

copyright notice
author[Know its black and accept its white],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291837547844.html

Random recommended