第6.1.1 vue初探

淩亂°似流年 2022-05-29 11:46 462阅读 0赞

[vue官网][vue],[element-ui][]  
**1 环境准备**  
参考[ubuntu 上安装node.js 的简单方法][ubuntu _node.js]，[Vue2.0史上最全入坑教程（上）—— 搭建Vue脚手架（vue-cli][Vue2.0_ _Vue_vue-cli]

# 安装nodejs,这里是ubuntu环境的
    sudo apt-get install nodejs
    sudo apt-get install npm
    # 更改npm源
    # 初始源 npm config set registry https://registry.npmjs.org/
    npm config set registry http://registry.npm.taobao.org
    npm install -g cnpm
    # 安装webpack
    cnpm install webpack -g
    # 安装vue-cli
    cnpm install vue-cli -g

**2 vue工程**  
首次创建vue工程，修改了少量代码，居然报这样的错误，把我吓一跳，这还是我了解的js语法吗，就是python也没有那么严格吧。恕我是新手，不了解规矩。  
![1][]  
![2][]  
调研之后，原来还有[eslint][]，于是执行命令

npm install -g eslint

使用`vue init webpack my-project`创建的vue工程是有`.eslintrc.js`文件的，所以你不需要再执行`eslint --init`,下面是刚创建vue工程的默认配置  
![2][2 1]  
现在根据我自己的需要配置如下,按照[EsLint Rules][]中的Best Practices  
，配置自己的项目。在配置过程中，如果遇到了一些问题，可以参考[从0到1配置eslint][0_1_eslint],我目前的配置如下

module.exports = {
      root: true,
      parserOptions: {
        parser: 'babel-eslint'
      },
      env: {
        browser: true,
        node: true
      },
      extends: [
        'plugin:vue/essential', 
        'standard'
      ],
      // required to lint *.vue files
      plugins: [
        'vue'
      ],
      rules: {
            'generator-star-spacing': 'off',
            "no-debugger": process.env.NODE_ENV === 'production' ? 2 : 0,
            // 强制在 function的左括号之前使用一致的空格
            "space-before-function-paren":['error', 'never'],
        // 不要求操作符周围有空格
        "space-infix-ops":'off',
        // 忽略空格
        "key-spacing":'off',
        // 新行允许有空格
        "space-before-blocks":"off",
        // 逗号前后的空格
        "comma-spacing":"off",
        // 允许多个空格
        "no-multi-spaces":"off",
        // 允许关键字空格
        "keyword-spacing":"off",
        // 文件末尾取消强制换行 
        "eol-last":"off",
        // 缩进风格
        "indent":"off"
      }
    }

编辑器我采用的vscode，安装插件`vscode-element-helper`、`vetur`  
接着我对比vue的官方文档，发现我的代码是这样的

<template>
      <el-input v-model="isearch" placeholder="请输入您需要爬取的网址" prefix-icon ="el-icon-search" @keyup.enter.native="doSearch"></el-input>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data() {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      },
      methods: {
        doSearch() {
          console.log('查找了')
        }
      }
    }
    </script>

官网并没有介绍`export default`是什么东东，故而单纯学vue没啥用，原来还有一个叫ES2015的写法。[说明与比较：new Vue() 和 export default \{\}][new Vue_ _ export default]，这个跟我之前写requirejs有些类似。  
有时候新建一个工程，会出现下面的错误  
![3][]  
这个时候需要注意  
![4][]  
自行npm install  
最有效的办法是：`npm config set registry http://registry.npm.taobao.org`  
可以通过`npm config list`查看是否配置ok  
如果vue init 很慢，则执行`cnpm install webpack -g`，然后在执行`vue init webpack xxxx`,就很快了。接着执行`npm audit fix`

# vue-cli3之后使用的是@vue/cli
    npm install -g @vue/cli
    vue create kui
    PS F:\vuework> vue create kui
    ?  Your connection to the default yarn registry seems to be slow.
       Use https://registry.npm.taobao.org for faster installation? Yes
    
    
    Vue CLI v4.5.13
    ? Please pick a preset: Default ([Vue 2] babel, eslint)
    ? Pick the package manager to use when installing dependencies: Yarn
    
    
    Vue CLI v4.5.13
    ✨  Creating project in F:\vuework\kui.
    �  Initializing git repository...
    ⚙️  Installing CLI plugins. This might take a while...
    
    yarn install v1.22.10
    info No lockfile found.
    [1/4] Resolving packages...
    [2/4] Fetching packages...
    info fsevents@2.3.2: The platform "win32" is incompatible with this module.
    info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
    info fsevents@1.2.13: The platform "win32" is incompatible with this module.
    info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
    
    
    success Saved lockfile.
    Done in 30.05s.
    �  Invoking generators...
    �  Installing additional dependencies...
    
    yarn install v1.22.10
    [1/4] Resolving packages...
    [2/4] Fetching packages...
    info fsevents@2.3.2: The platform "win32" is incompatible with this module.
    info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
    info fsevents@1.2.13: The platform "win32" is incompatible with this module.
    info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
    [3/4] Linking dependencies...
    [4/4] Building fresh packages...
    
    success Saved lockfile.
    Done in 8.83s.
    ⚓  Running completion hooks...
    
    �  Generating README.md...
    
    �  Successfully created project kui.
    �  Get started with the following commands:
    
     $ cd kui
     $ yarn serve

[vue]: https://cn.vuejs.org/v2/guide/
[element-ui]: http://element.eleme.io/#/zh-CN/component/transition
[ubuntu _node.js]: https://www.cnblogs.com/musings/p/8976074.html
[Vue2.0_ _Vue_vue-cli]: https://www.jianshu.com/p/1626b8643676
[1]: /images/20220529/cbbd014b840245409de1aae51e42389e.png
[2]: /images/20220529/2ffa42c4de1243ec9436ca52cbcf68b5.png
[eslint]: http://eslint.cn/
[2 1]: /images/20220529/75a386dd3b8647b09ac0cee0317ce1a2.png
[EsLint Rules]: http://eslint.cn/docs/rules/
[0_1_eslint]: https://juejin.im/entry/599e5ad4f265da2488089ad3
[new Vue_ _ export default]: https://www.cnblogs.com/ppJuan/p/7151000.html
[3]: /images/20220529/9cd4ad357b78435d9f46b1a323e0a6e0.png
[4]: /images/20220529/34972c93a3454584af3eac833b4a1c33.png