zoukankan      html  css  js  c++  java
  • [Vue安装教程]十分钟学会vue 安装

    【总结】Vue的安装主要有一下几个步骤:

    1、安装npm淘宝镜像
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    2、安装脚手架工具vue-cli
    cnpm install -g vue-cli
    3、创建新的项目
    vue init webpack my-project
    4、进入项目路径
    cd my-project
    5、安装项目文件
    cnpm install
    6、运行项目
    cnpm run dev

    【安装过程】 

    1、在安装Vue之前需要先安装git和node

    安装git,下载网址https://git-scm.com/downloads/,按提示安装,完成后把git bash的快捷方式放到桌面,打开后的效果如下图

    安装node,进入nodejs的官网的下载页面https://nodejs.org/en/download/,根据电脑选择安装包,我这里是64位的windows系统,所以我选如下图

    下载完成后一路next即可完成安装,打开git bash,输入node –v和npm –v,如果能正确输出版本号,则说明安装包安装成功,效果如图:

     2、安装Vue

    2.1安装npm的淘宝镜像

    由于npm国内的访问速度很慢,我们一般使用淘宝的镜像,在git bash里面输入如下代码(注意代码registry后面不要有空格):

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

    安装完成后会出现如下的代码:(会有点慢,需要等待一会)

    2.2全局安装vue-cli

    cnpm install -g vue-cli

    2.3创建项目

    创建一个基于 webpack 模板的新项目,项目名为my-project

    vue init webpack my-project

    新手创建项目的时候,所有选项选择否N,以免代码出现错误,后期进阶到高级的时候可以自己重新创建。

    出现如上的代码,则说明安装成功,这里只需要按快捷键CTRL+C就可以退出当前页面,进入命令输入界面

    上面安装的位置是在,git bash的头部信息上可以看到安装的位置,然后进入到项目的文件夹里面,这里是进入到my-project文件夹

    2.4进入项目路径

    cd my-project       

    输入ls可以查看当前目录下有哪些文件夹和文件

    输入ll –a可以查看当前目录下文件的详细信息

    2.5安装运行

    cnpm install

    当出现如下代码则说明安装成功:

    运行我们的项目,这里的代码是加上cnpm的:

    cnpm run dev

    安装完成之后允许上面的代码,会显示如下的代码:

    出现这些代码之后,页面会自动跳转到页面http://localhost:8080/#/,页面如下:

     

    【Vue安装中常见错误

    错误1:提示错误,Error: Cannot find module 'chalk'

    这是因为在执行代码cnpm run dev之前漏掉了关键的一步,即安装项目文件cnpm install,在运行之前先安装项目文件,即可以解决。

    其他...

  • 相关阅读:
    java基础数据
    Java环境搭建
    Mysql数据库基础
    php环境搭建
    1117bootstrap组件
    1117bootstrap
    1115表单验证
    1114JS实例4
    1113JS实例3
    1111JS实例2
  • 原文地址:https://www.cnblogs.com/zhanai/p/7526127.html
Copyright © 2011-2022 走看看