Vue related_study notes

1.view-cli

1.1. What is vue-cli

A scaffold officially provided by vue-cli is used to quickly generate a vue project template; the
pre-defined directory structure and basic code are just like the created maven project. You can choose to create a Gujia project. This Gujia project is the scaffolding. We The development is faster;

1.2. The required environment

• Node.js: http://nodejs.cn/download/
  Confirm that nodejs is installed successfully:
• Enter under cmd to node -vsee if the version number can be printed out;
• Enter under cmd to npm -vsee if the version number can be printed out;
  install Node.js Taobao mirror accelerator (cnpm)

# -g 就是全局安装
npm install cnpm -g
#  或者使用如下语句解决 npm 速度慢的问题
npm  install  --registry=https://registry.npm.taobao.org

Installation path C:\Users\admin\AppData\Roaming\npm:;

1.3. Install vue-cli

cnpm install vue-cli -g
Test whether the installation is successful and
see which templates can be used to create vue applications.Usually we choose webpakc
vue list

1.4. Create a vue-cli application

1. Create an empty folder
2. Create a vue application based on the webpack template,
   where myvue is the name of the project.
   vue init webpack myvue
   Select NO
   
   project structure all the way :
   

1.5. Initialize and run

cd myvue First enter the project folder
npm install
npm run dev

2. Webpack

webpack is a static module bundler for modern JavaScript applications. When webpack processes an application, it recursively builds a dependency graph that contains every module that the application needs, and then packages all these modules into one or more bundles.

2.1 Install Webpack

Webpack is a module loader and packaging tool. It can process and use various resources, such as JS, JSX, ES6, SASS, LESS pictures, etc., as modules;
Installation:
npm install webpack -g
npm install webpack-cli -g
Test whether the installation is successful:
webpack -v
webpack-cli -v

2.2 Configuration

Create a webpack.config.jsconfiguration file

• entry: entry file, specify which file WebPack uses as the entry point of the project
• output: output, specify WebPack to place the processed file to the specified path;
• module: module, used to process various types of files
• plugins: Plug-ins, such as: hot update, code reuse, etc.
• resolve: set the path point
• watch: monitor, used to package directly after setting file changes

module.exports = {
    
    
    entry : "",
    output : {
    
    
        path : "",
        filename: ""
    },
    module: {
    
    
        loaders : [
            {
    
    test: /\.js$/, loader: ""}
        ]
    },
    plugins: {
    
    },
    resolve: {
    
    },
    watch: true
}

2.3 Use WebPack

1. Create project
2. Create a directory named modules to place resource files such as JS modules
3. Create a module file under modules, such as hello.js, for writing JS module related code; for example:

// 暴露一个方法:sayHi
exports.sayHi=function() {
    
    
    document.write("<h1>hello,webpack</h1>")
};

4. Create an entry file named main.js under modules to set the entry attribute when packaging; for example

// require 导入一个模块,就可以调用这个模块中的方法了
var hello=require("./hello");
hello.sayHi();

5. Create a webpack.config.jsconfiguration file in the project directory and use the webpackcommand to package

module.exports = {
    
    
    entry: './modules/main.js',
    output : {
    
    
        filename : "./js/fihaha.js"
    }
}

6. Add the watch parameter to monitor changes
   webpack -watch

3. vue-router routing

Vue Router is the official route manager of Vue.js. It is deeply integrated with the core of Vue.js, making it easy to build single-page applications.

3.1 Installation

First check if vue-router exists in node_modules.
vue-router is a plug-in package, so we still need to use npm/cnpm to install it. Open the command line tool, enter the project directory, and enter the following command:
npm install vue-router --save-dev
If you use it in a modular project, you must explicitly install the routing function through Vue.use();

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

3.2 Test

1. Delete the unused things first
2. componentsStore our own components in the directory
3. Define a Content.vuecomponent

<template>
    <h3>内容页</h3>
</template>

<script>
    export default {
     
     
        name: "Content"
    }
</script>
<style scoped>
</style>

4. Install routing. Create a new folder in the src directory:, routercreate a new file index.jsto store routing

import Vue from 'vue'
// 导入路由组件
import VueRouter from "vue-router";
// 导入自定义的组件
import Content from "../components/Content";
import Main from "../components/Main";

// 安装路由
Vue.use(VueRouter);

// 配置导出路由
export default new VueRouter({
    
    
  routes: [
    {
    
    
      // 路由路径
      path: '/content',
      // 路由名称
      name : 'content',
      //跳转到组件
      component : Content
    },
    {
    
    
      // 路由路径
      path: '/main',
      // 路由名称
      name: 'main',
      // 跳转到组件
      component: Main
    }
  ]
});

5. In main.jsthe routing configuration

import Vue from 'vue'
import App from './App'

// 导入上面创建的路由配置目录
import router from './router'
// 关闭生产模式下给出的提示
Vue.config.productionTip = false

new Vue({
    
    
  el: '#app',
  // 配置路由
  router,
  components: {
    
     App },
  template: '<App/>'
})

6. In App.vueuse routing

<template>
  <div id="app">
  <h1>hello,vue</h1>
    <!--router-link : 默认会被渲染成一个<a> 标签,to 属性为指定连接
        router-view: 用于渲染路由匹配到的组件
    -->
    <router-link to="/">go首页</router-link>
    <router-link to="/content">go内容</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
     
     
  name: 'App',
}
</script>

4. vue + ElementUI

4.1 Create Project

1. Create a project named hello-vue
   vue init webpack hello-vue
2. Install dependencies, you need to install four plugins: vue-router, element-ui, sass-loader and node-sass

# 进入工程
cd hello-vue 
# 安装 vue-router
npm install vue-router --save-dev
# 安装 element-ui
npm i element-ui -S
# 安装依赖
npm install
# 安装SASS 加载器
cnpm install sass-loader node-sass --save-dev
# 启动测试
npm run dev

3. Npm command explanation:

• npm install moduleName : Install the module to the project directory
• npm install -g moduleName : -g means to install the module globally, where to install the specific disk depends on the location of npm config prefix;
• npm install -save moduleName :-Save means to install the module into the project directory, and write dependencies in the dependencies node of the package file,-S is the abbreviation of this command;
• npm install -save-dev moduleName : --save-dev means to install the module under the project, and write dependencies in the devDependencies node of the package file, -D is the abbreviation of this command