zoukankan      html  css  js  c++  java
  • 新手入门vue 使用vue-cli创建项目

    本文是针对对于完全没有了解过vue 和npm,连运行环境和项目构建的都不会的小白,对于前端老司机的就不用看了,浪费时间。

    使用npm vue-cli 构建vue 项目

    第一步:安装运行环境(node与npm)

    nodeJ官网:http://nodejs.cn/ 下载安装包( 安装)

    安装完成后,需要检测是否安装成功

    使用命令行cmd  打开dos 黑窗口,运行 node  -v npm –v,出现版号说明安装成功

    注(npm node自带的,在安装node时已经安装了)

    如何升级npm 的版本呢?很简单

    执行命令:npm  i –g  to update (全局安装:建议) 或者 npm install –g npm

     第二步:安装脚架手 vue-clic

     安装vue-cli 有两种安装途径(npm 与 cnpm),二选一

    (1) 使用npm 安装vue-cli,全局安装 (该方式安装比较慢,国外镜像)

     运行:npm install  g vue –cli

     (2) 使用cnpm ( 国内淘宝镜像)安装vue-cli

       (2.1) 首先要注册cnpm

      运行: npm install  -g cnpm  --registry=https://registry.npm.taobao.org

      

      (2.2) 检测 cnpm 是否安装成功,出现版本说明安装成功

      运行:cnpm -v

       

      (2.3)使用cnpm 安装脚架手vue-cli

      运行:cnpm install –g vue-cli 

      使用 vue –V(注意:大写V)查看是否安装成功

      运行:vue –V

      

     第三步 :正式开始创建项目

      1.使用 命令:cd  目录路径 ,进入到你指定的创建项目的路径下

      如:

       

      2. 使用 vue init webpack 初始化项目

      运行:vue init webpack myfilst-vueproject(自定义文件目录名称)

      一般默认,直接回车就可以了

      

      在目前为止,已创建好一个vue 的项目,目录结构如:(结构详解看官网)

      

      3.按照提示运行流程,在当前项目的目录下安装模块

      运行: cd 项目名称

       运行: npm install 

      

        正在安装模块依赖。。。。

      模块安装完成,项目根目录下多一个文件夹

      

     

     第四步:启动/运行项目

     运行:npm run dev

       成功运行,默认效果如:

      

      

      如果没有显示正常的页面,看是否端口是否被占用,默认运行端口为8080

      项目根目录下 ->config->index.js

      

      

      修改该端口值,重新运行:npm run dev

      每次修改配置文件都要重新运行

    第五步:打包上线

      运行:npm run build

       打包完成后,会在根目录下生成一个dist 的文件夹,可以在本地打开浏览,项目上线时,只需将dist 文件夹放在服务器即可

     

    完结。。。。谢谢

  • 相关阅读:
    对于glut和freeglut的一点比较和在VS2013上的配置问题
    应用程序无法启动(0*c000007b)
    无法定位程序输入点glPopAttrib于动态连结库OPENGL.dll上
    计算机中丢失OPENGL.dll
    Visual Studio "无法查找或打开PDB文件"解决方法
    VC包含目录、附加依赖项、库目录及具体设置
    无法解析的外部符号 _WinMain@16
    OpenGL入门学习
    linux-用户建立及权限分配
    linux下添加用户并赋予root权限
  • 原文地址:https://www.cnblogs.com/beyonds/p/8978020.html
Copyright © 2011-2022 走看看