• 学习Vue CLI 3.x版本的安装以及创建项目


    官网链接 https://cli.vuejs.org/zh/guide/installation.html

    一、安装node

    输入cmd,打开命令提示符 输入 node -v

    如果提示 node不是内部文件等,需要你安装一下node

    参考网址 http://nodejs.cn/download/

    安装教程(注意版本下载)

    直接下载

    按照步骤安装

    安装完成后

    检查一下是否安装了

     (npm 是 nodejs的包管理器,用于node插件管理;)

    二、安装vue-cli

    >继续执行命令    npm install -g @vue/cli

    等待安装...

    安装完成后 可以输入 vue -V 检查是否成功

    如果安装成功会显示版本

    致此vue 3.x 算是安装完成了

    vue --version 可以检查是安装了最新版本

     ------------------------------------------------------------------混乱分割线-------------------------------------------------------------------------

    三、创建项目方法一(命令式)

         cd 进入工具项目路径

    @1.如果现在直接创建项目,会有问题,请看展示

    >命令输入 vue create hollo-wd

    会提示太慢了,给出建议

    原因:访问是国外服务器,为了提高速度,可以借助国内镜像,也就是国内自己npm的意思,利用淘宝提供的cnpm

    正确步骤是:

    @2.先安装 cnpm

    >输入命令[ npm install -g cnpm -registry=https://registry.npm.taobao.org ]

      (注意是输入整条)

    >检查结果 cnpm -v

    --------------------------------------------------------------------------重度混乱分割线-----------------------------------------------------------------------

    @3.现在新建项目

    >命令输入 vue create hello

     > 回车

     >选default

    执行成功后

    查看结果,发现已经生成了hello文件夹以及生成两个文件

    >不选default

    选择第二种方式,可以根据自己需要配置

    生成文件

    (详细可以参考https://www.cnblogs.com/wisewrong/p/9740173.html)

    四、创建项目方法二(浏览器)

    官网还提供另一种友好的方法:在浏览器页面创建项目

    命名输入

    >vue ui

    会打开一个浏览器页面(如果发现ie不支持,换其他浏览器试试),按照页面指引很简单

    创建好项目app后出来页面如下图:

    感觉很牛逼,还没研究好具体功能。

    很明显看到项目的文件多了很多

    五、启动服务器(我理解是)

    上面两种方法都可以创建好项目,发现命令提示如下(app是我的项目)

     然后就尝试执行

    >npm run serve

    结果如下,从接口进入

     

     执行页面

    下面可以自己开发了。

    六.项目重新启动快捷方式

    打开浏览器 :http://localhost:8080

    如果关掉命令,就会关掉服务器,无法访问了

    >现在进入app文件里面,按住shift 右击空白处

    >选择打开窗口,如下图

    重新启动服务器

    重新刷新页面发现可以了。

    如果想打开项目管理页面,直接执行 vue ui

    ------------------------------------------------------------清醒分割线-------------------------------------------------------------------------------

    番外篇:

    在安装过程遇到疑点:

    1.vue-cli每次都要启动服务器才能用吗?

    2.每次创建项目都要这么麻烦的吗

    3.文档查看,针对旧版本写比较好有 https://segmentfault.com/a/1190000015680030 ,如果你安装是旧版本可以参考下。

       新版本 参考https://www.cnblogs.com/hezhi/p/10212060.html  

  • 相关阅读:
    TreeList 树形控件 实现带三种状态的CheckBox
    SQL 左外连接,右外连接,全连接,内连接(转)
    在DataTable中进行数据查询 (转)
    uva10594 Data Flow最小费用流,两个代码区别不大(我没看出区别),为什么一个对,另一个超时!!
    SGU142 Keyword好题
    uva 10881
    南京理工1747(数论)WA了好多遍!
    CF161D 树形dp
    uva 11646(大水题几何分类)
    求a加到b二进制加法有多少次进位。
  • 原文地址:https://www.cnblogs.com/yflbk-2016/p/10616350.html
Copyright © 2020-2023  润新知