zoukankan      html  css  js  c++  java
  • vueCli3 项目 -- 01.项目展示及准备工作(cli3操作)

    仿饿了么项目

    展示:(也可以查看饿了么app)

    ![](https://img2018.cnblogs.com/blog/1817586/201911/1817586-20191104200514107-451419891.png)

    1. 准备工作

    1.1. 有 node.js 环境

    1.2. vue cli 脚手架版本在3以上(版本低了或者没有安装,参考下一条)

    • 查看cli版本:
    ![](https://img2018.cnblogs.com/blog/1817586/201911/1817586-20191104200531084-1172384487.png)

    1.3. 安装cli3

    • 1.windows 卸载低版本:npm uninstall vue-cli -g
    • (Linux 卸载:sudo npm uninstall vue-cli -g)
    • 2.安装全局的,最新的cli: npm install -g @vue/cli
    • (linux下: sudo npm install -g @vue/cli)

    附:cnpm 代替 npm 更快

    参考 cnpm镜像 地址

    • cmd命令行输入:npm install -g cnpm --registry=https://registry.npm.taobao.org
    • (linux下:sudo npm install -g cnpm --registry=https://registry.npm.taobao.org)
    • 出现这样的效果,就代表我已经装好了。也可以使用 cnpm -v 检测是否装好。
    ![](https://img2018.cnblogs.com/blog/1817586/201911/1817586-20191104200546582-888925407.png)
    • 3.安装新的 cli 包:cnpm install -g @vue/cli
    • (linux下:sudo cnpm install -g @vue/cli)
    • 测试一下最新版本:vue -V

    2. 构建项目

    2.1. 在相应目录下使用命令:

    ![](https://img2018.cnblogs.com/blog/1817586/201911/1817586-20191104200559264-317030488.png)

    2.2. 创建项目:vue create ele-app。创建过程中做以下配置:

    ![](https://img2018.cnblogs.com/blog/1817586/201911/1817586-20191104200609815-246708033.png)

    2.3. 安装完了,我来查看一下当前效果

        cd ele-app
        npm run serve
        注意:cli3以下的版本,我们使用的是:npm run dev
    
    ![](https://img2018.cnblogs.com/blog/1817586/201911/1817586-20191104200618028-2079382680.png)

    2.4. 我们在浏览器中打开本地的接口

    ![](https://img2018.cnblogs.com/blog/1817586/201911/1817586-20191104200635292-2001206173.png)

    3. 用编辑器打开当前项目ele-app

    ![](https://img2018.cnblogs.com/blog/1817586/201911/1817586-20191104200646320-1479164506.png)
  • 相关阅读:
    201521123084 《Java程序设计》第4周学习总结
    201521123084 《Java程序设计》第3周学习总结
    C语言博客作业—数据类型
    c语言博客作业-函数
    java课程设计——猜数游戏个人博客
    java课程设计-猜数游戏
    201521123092《java程序设计》第14周学习总结
    201521123092《java程序设计》第十三周学习总结
    201521123092《java程序设计》第12周学习总结
    201521123092《java程序设计》第十一周学习总结
  • 原文地址:https://www.cnblogs.com/hefeifei/p/11794395.html
Copyright © 2011-2022 走看看