zoukankan      html  css  js  c++  java
  • Vue-cli 安装使用和理解

    Vue 的 官方文档 提到

    image

    点开这个链接,跟着文档一步步直到:

    image

    $ npm install -g vue-cli
    $ vue init webpack my-project
    $ cd my-project
    $ npm install
    $ npm run dev

    如果按照文档的建议,提前了解了 npm 的语法,这里应该没什么要解释的,my-project 是自己的项目文件夹名称,我操作的时候,根据终端的提示,自动运行了

    npm install

    结果出现了一些报错,然后根据情况改错,但是最终

    npm run dev

    还是报错了,

    image

    参考了网上建议,把 node_modules 文件夹删了,重新

    npm install

    然后,再

    npm run dev

    现在,就可以了,

    image

    猜测成功的原因是:

    自动 npm install 出现的错误,虽然改掉了,但是相关的配置可能已经被影响到了,所以卸了重装,相当于改错之后重新装,就不会再被错误影响了;

    然后我的项目目录就成这样了:

    image

    循着前面的文档:

    image

    找到了,For this template,看到了

    image

    根据提示,就先看了 vue-loader's documentation,进到了这里:

    image

    在这里,按照提示跑了一遍,项目目录就是这个样子:

    image

    当我把 vue-loader 和 vue-cli 文档都看完之后,再回来看 vue-cli 生成的项目目录,也就是:

    image

    大概明白了什么意思,也大概知道这些东西用来干嘛用的,但是看主要代码的时候,

    image

    并不知道这个 router-view 是用来干嘛的,也找不到定义,回头看 @vue/cli 生成的项目文件,

    image

    在旁边是能找到 HelloWorld 的定义的,是一个组件而已,这下和以前的 script 引入 vue.js 相比,难度不是很大,能看懂;

    后来了解到,那个看不懂的 <router-view /> 是 vue-router ,初始化的时候选择否就行了,就是下面这样:

    image

    当然,我还把测试的东西也选 No 了,毕竟暂时用不到,安装好了,来看下目录:

    image

    虽然目录看起来又跟装了 vue-router 的项目目录一样多,但是打开 App.vue,

    image

    会发现,跟 @vue/cli 生成的项目文件类似的,看得懂,所以我就从这里开始通过 vue-cli 学习 vue 的单文件组件;

    至于 v-router,我打算和 vuex 作为 vue 全家桶一起学,刚开始,暂时觉得没必要学;

    另外,如果感觉这个案例和以前的 script 引入 vue.js 对不上号,理解不了的话,可以戳  vuejs 单文件组件.vue 文件

    参考文档:

    Vue项目碰到"‘webpack-dev-server’不是内部或外部命令,也不是可运行的程序或批处理文件"报错

    Vue-cli是何物

    vuejs 单文件组件.vue 文件

  • 相关阅读:
    微擎模块机制分析2
    微擎we7模块和模板安装方法
    git的使用 及一些常见的错误处理
    人,活着为了什么?
    fedora配置ip
    fedora安装gcc
    linux查看内核版本和发行版本号
    python数据类型2
    python之零碎知识
    python之数据类型1
  • 原文地址:https://www.cnblogs.com/xianshenglu/p/8508693.html
Copyright © 2011-2022 走看看