vue_learn_one

前端 , 评论

环境安装#

node安装#

  • wget解压即可,具体略

  • 配置~/.npmrc如:

  • registry=https://registry.npm.taobao.org/
sass_binary_site=http://cdn.npm.taobao.org/dist/node-sass
prefix=/main/node_global/global
cache=/main/node_global/cache


    1
    2
    3
    4
    5
    6
    7

    - 也可以使用命令行配置如:

    - ```bash
      #设置全局安装路径和缓存路径
       npm config set prefix /main/node_global/global
      npm config set cache /main/node_global/cache

  • 然后配置PATH,把node/bin和/main/node_global/global/bin都配置进去

vue的安装#

  • vue的全局安装和局部安装:#

    • 不推荐使用全局安装,多个环境容易打架.

    • 以下是全局安装不推荐:

    • 类似于npm install -g hexo-cli -g的意思就是global全局安装

    • npm  install -g  vue-cli
npm info vue

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15

      - ### 局部安装vue-cli 5.x:

      - - 先进入项目目录父文件夹(或工作空间),如`vuelearn`

        - 在此目录内`npm init -y`会生成一个基础的`package.json`文件

        - 然后`npm i -D @vue/cli` 会给这个文件夹安装一个局部的vue-cli,后续创建vue项目会使用这里面的vue-cli

        - 查看版本和执行需要使用`npx`命令

        - ```
          npx vue -V
          @vue/cli 5.0.8

  • 命令行创建vue项目#

    • 命令行使用npx vue create project-one,选择版本即可

      • vuelearn$ ll
总用量 36
drwxrwxr-x  5 tree tree 4096 3月   1 15:53 ./
drwxrwxr-x 37 tree tree 4096 3月   1 15:41 ../
drwxrwxr-x  3 tree tree 4096 3月   1 15:46 .idea/
drwxrwxr-x  6 tree tree 4096 3月   1 15:43 node_modules/
-rw-rw-r--  1 tree tree 8850 3月   1 15:53 npminstall-debug.log
-rw-rw-r--  1 tree tree  275 3月   1 15:43 package.json
drwxrwxr-x  6 tree tree 4096 3月   1 15:50 project-one/

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19

        - 会在这个父目录内生成了一个文件夹`project-one`

          - ```
            project-one$ ll
            总用量 828
            drwxrwxr-x   6 tree tree   4096 3月   1 15:50 ./
            drwxrwxr-x   5 tree tree   4096 3月   1 15:53 ../
            -rw-rw-r--   1 tree tree     73 3月   1 15:50 babel.config.js
            drwxrwxr-x   8 tree tree   4096 3月   1 15:50 .git/
            -rw-rw-r--   1 tree tree    231 3月   1 15:50 .gitignore
            -rw-rw-r--   1 tree tree    279 3月   1 15:50 jsconfig.json
            drwxrwxr-x 561 tree tree  20480 3月   1 15:50 node_modules/
            -rw-rw-r--   1 tree tree    905 3月   1 15:50 package.json
            -rw-rw-r--   1 tree tree 778958 3月   1 15:50 package-lock.json
            drwxrwxr-x   2 tree tree   4096 3月   1 15:50 public/
            -rw-rw-r--   1 tree tree    323 3月   1 15:50 README.md
            drwxrwxr-x   4 tree tree   4096 3月   1 15:50 src/
            -rw-rw-r--   1 tree tree    118 3月   1 15:50 vue.config.js
        

- 如果没有yarn包管理器,需要提前安装一个全局的包管理器yarn: `npm install -g yarn`

- 在项目里运行`yarn serve`

- 配置自动打开,增加devServer节点:

  - ```
    const { defineConfig } = require('@vue/cli-service')
    module.exports = defineConfig({
      transpileDependencies: true,
      devServer: {
        open: true
      }
    })
    
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
        29
        30
        31
        32

              

              ### 使用vue ui创建项目

              - 使用`npx vue ui`命令,会自动在本机8000端口启动一个服务
              - 设置项目名称,选择包管理器npm/yarn/pnpm之一,就行
              - 也可以把之前cmd创建的项目导入进来

          

          

          

        # 创建vue2项目

         -  创建一个vue2的项目 `npx vue create project_2_vue2`

         -  然后选择vue2和yarn

         -  创建后如果没有`vue.config.js`,需要手动创建

         -  ```javascript
            //新增简单配置
            module.exports = defineConfig({
              transpileDependencies: true,
              devServer: {
                open: true
              }
            })

引入ElementUI#

安装ElementUI#

全局使用#

  • npm i element-ui -S

  • 然后在项目main.js完整引入

  • import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

# 全部引用
Vue.use(ElementUI)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17

    ### 按需使用

     -  麻烦一些,但是推荐,进入项目目录,然后先安装

     -  ```bash
        npm  i element-ui -S
        # 安装插件
        npm i babel-plugin-component -D
        
        # main.js中 部分引用
        import {Button,Tag} from 'element-ui'
        
        # main.js中 
        Vue.use('Button')
        Vue.use('Tag')

  • 或者在项目中新建plugins文件夹,新建element.js文件[推荐方式]

  • //element.js
import Vue from 'vue'
import {Button,Tag} from 'element-ui'
Vue.use('Button')
Vue.use('Tag')

//main.js
import '../plugins/element.js'
<!--code5-->

CSS预处理器#

  • 如sass, www.sass.hk less等

  • npm i sass-loader@7   node-sass@4 -S

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26

    - 



    以上工作完成后,package.json应该类似:

    ```json
      "dependencies": {
        "core-js": "^3.8.3",
        "element-ui": "^2.15.13",
        "node-sass": "^8.0.0",
        "sass-loader": "^13.2.0",
        "vue": "^2.6.14"
      },
      "devDependencies": {
        "@babel/core": "^7.12.16",
        "@babel/eslint-parser": "^7.12.16",
        "@vue/cli-plugin-babel": "~5.0.0",
        "@vue/cli-plugin-eslint": "~5.0.0",
        "@vue/cli-service": "~5.0.0",
        "babel-plugin-component": "^1.1.1",
        "eslint": "^7.32.0",
        "eslint-plugin-vue": "^8.0.3",
        "vue-template-compiler": "^2.6.14"
      },

然后在main.js中全局使用ElementUI类似

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import Vue from 'vue'
import App from './App.vue'

// 新增两行
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 新增一行
Vue.use(ElementUI)


Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

1
2
3
4
5
6
7
8

<el-button>btn123</el-button>
<el-button type="primary">btn123</el-button>
<el-button type="info">btn123</el-button>
<el-button type="danger">btn123</el-button>
<el-button type="success">btn123</el-button>


Vue3项目创建#

  • cd vue3learn/

 npm init vue@latest
 
 Need to install the following packages:
  [email protected]
Ok to proceed? (y) 

Vue.js - The Progressive JavaScript Framework

✔ Project name: … vue3_01
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes

Scaffolding project in /main/workspace/vscodespace/vue3learn/vue3_01...

Done. Now run:

  cd vue3_01
  # 安装package.json中的依赖到项目目录node_moudules文件夹
  npm install
  # 启动服务(运行package.json中script/dev下面的命令)
  npm run dev



    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17





    - main.js会把内容挂载到html的#app

    - ```javascript
      import { createApp } from 'vue'
      // 引入一个.Vue文件命名为App对象,内部为一堆html和样式
      import App from './App.vue'
      
      import './assets/main.css'
      
      // 将上面的App对象挂载到html的#app DIV中
      createApp(App).mount('#app')

MVVM工作原理#

model和view的双向绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!--脚本-->
<script>

// vue实例对象  viewmodel
export default{
  // 数据源放到data节点中(model)
  data: () =>({
    account: 'abc'
  })
}
</script>

<!--视图-->
<template>
  <h1>我的第一个App应用Demo</h1>

  <!--使用数据源的 DOM-->
  <input v-model="account">
</template>

<!--样式-->
<style>
</style>

猫哥Risk Control Engineer

一个金融风控软件工程师。