zoukankan      html  css  js  c++  java
  • vue使用--环境搭建与基本项目创建说明

    桃之夭夭,思绪纷飞。

    一、环境搭建


    1.安装node.js(包含包管理工具npm)

       安装包可以到node官网进行下载,穿梭>>>

       根据自己的操作系统下载相应版本的安装包,运行后按照操作提示进行即可

       测试是否安装成功:在命令提示符下输入 ‘node -v、npm-v’,正确显示版本号即为安装成功。

      

    2.安装cnpm(淘宝镜像,可不安装)

       由于npm安装插件访问的是国外的服务器,受网络等影响较大,可能会出现无法访问或安装过慢的问题,cnpm为淘宝团队免费提供的完整npmjs.org镜像,以10分钟的频率与官网服务器同步,插件安装稳定、下载速度快

       安装:npm install cnpm -g --registry=https://registry.npm.taobao.org  /  npm install -g cnpm --registry=https://registry.npm.taobao.org

       安装完成后,我们就可以使用cnpm代替npm进行插件的下载等操作

    3.安装webpack

       模块打包器

       命令: npm install webpack -g  / 如果安装的淘宝镜像,可以使用 cnpm install webpack -g

       可使用‘webpack -v’检查是否安装成功

    4.安装vue-cli

     vue脚手架,vue.js开发的标准工具,介绍可参考这篇文章>>>vue-cli最全解析

       命令:npm install vue-cli -g    /如果安装了淘宝镜像,可以使用 cnpm install vue-cli -g

     检查安装: Vue -V   (注意V是大写)

    二、创建vue项目


    1. 命令:vue init <template-name> <project-name>

       模板一般选择webpack即可,项目名称自己起,例如我们起名vuedemo,则安装命令为:vue init webpack vuedemo

       安装截图如下:

      

    2.选项介绍

       > Project name:项目名称,可不写默认命令中的项目名,注意不能使用大写字母

       >Project description:项目描述

       >Author:作者

       >Vue build:构建,我们选择runtime+(standalone)即可,还有一个选项是runtime-only

       >Install vue-router:是否安装vue路由,选择是

       >Use ESLint to。。:是否用ESLint来限制你的代码错误和风格

       >unit tests,单元测试,根据自己项目需要,这里示例项目选no

       >Setup e2e。。:是否安装e2e来进行用户行为模拟测试

       >Should we run npm。。。:使用哪种方式安装依赖包,有三个npm、yarm、self(后期自己决定),示例项目选择npm

       好了,接下来,等待安装完成即可

    3.运行

       安装完成后,使用命令:cd <project name> 进入项目目录,运行命令 npm run dev

       等待出现提示your application is running here:localhost:端口,在浏览器访问,显示如下即可

      

    4.安装过程异常处理

       新创建项目报错:npm ERR! Unexpected end of JSON input while parsing near

       参考解决方案,传送>>>

       我的解决流程:

       》删除缓存文件

       》执行清理缓存

       》重新安装

  • 相关阅读:
    装饰者模式
    Linux top命令
    Java基础--单例类创建和测试
    Mybatis动态sql
    bmp图片格式及读取
    自然语言处理--nltk安装及wordnet使用详解
    Spring注解
    struts2 + spring + mybatis 框架整合
    Java基础--ThreadLocal
    Java基础--压缩和解压缩gz包
  • 原文地址:https://www.cnblogs.com/xihao/p/11382233.html
Copyright © 2011-2022 走看看