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,在运行之前先安装项目文件,即可以解决。

    其他...

  • 相关阅读:
    cf1100 F. Ivan and Burgers
    cf 1033 D. Divisors
    LeetCode 17. 电话号码的字母组合
    LeetCode 491. 递增的子序列
    LeetCode 459.重复的子字符串
    LeetCode 504. 七进制数
    LeetCode 3.无重复字符的最长子串
    LeetCode 16.06. 最小差
    LeetCode 77. 组合
    LeetCode 611. 有效三角形个数
  • 原文地址:https://www.cnblogs.com/zhanai/p/7526127.html
Copyright © 2011-2022 走看看