zoukankan      html  css  js  c++  java
  • 初始化一个vue项目

    1.安装node

    端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,vue的运行是要依赖于node的npm的管理工具来实现,下载https://nodejs.org/en/,安装完成之后,打开cmd开始输入命令。(需要用管理员权限cmd)。

    2.查看node的版本号

    下载好node之后(默认安装即可自动配置好环境变量),以管理员身份打开cmd管理工具,输入 node -v ,回车,查看node版本号,出现版本号则说明安装成功。

    3.安装淘宝npm镜像

    由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue.
    淘宝的cnpm命令管理工具可以代替默认的npm管理工具。
    输入命令:
    npm install -g cnpm -registry=https://registry.npm.taobao.org

    4.安装全局vue-cli脚手架

    淘宝镜像安装成功之后,我们就可以全局vue-cli脚手架.
    输入命令:cnpm install --global vue-cli 回车;
    验证是否安装成功,在命令输入vue,出来vue的信息,及说明安装成功;
    输入命令:cnpm install --global vue-cli

    5.建一个新项目

    搭建完手脚架之后,我们要开始建一个新项目,这个时候我建议,尽量不要装在C盘,因为vue下载下来的文件比较大,如果要改盘的话,直接输入D:回车就可以直接改盘
    输入命令:vue init webpack my-project-first
    回车,my-project-first是我自己的文件夹的名字,是基于webpack的项目,输入之后就一直回车,直到出现是否要安装vue-route
    这个我们在项目要用到,所以就输入y 回车

    6.注意

    下面会出现是否需要js语法检测,这个我们暂时用不到,就可以直接输入no,后面的都可以直接输入no,都是我们暂时用不到的
    打开D盘查看一下,会发现多了一个刚刚创建的文件夹

    7.进入项目文件夹

    文件夹已经下载好了,现在就可以进入文件夹,输入:cd my-project-first 回车进入新建的项目。

    8.在项目里安装依赖

    因为各个模板之间都是相互依赖的,所以现在我们要安装依赖,在项目里输入以下命令。
    输入命令:npm install
    实在安装慢不得已可以使用cnpm install
    注意:cnpm 有可能发生未知的错误,请尽量使用:npm install

    9.运行

    一切环境依赖安装准备就绪,我们来测试一下自己新建的vue项目的运行情况,输入命令:npm run dev直接回车。
    会弹出一个浏览器访问地址默认为localhost:8080
    注意:run dev只是vue中package.json的打包方式,初始化项目默认是run dev后期打包项目可以自定义设置 ,run build同理

    10.访问验证

    8080是默认的端口,要访问的话,直接在浏览器输入localhost:8080就可以打开默认的模板了;到此为止,vue开发环境搭建完毕。

    最后如何修改默认的端口?
    我们可以看到初始化的根目录下有一个config文件夹,看名字就知道与配置有关,打开config目录下的index.js,可以修改hostport,这里不仅可以改变ip和端口,还可以根据需要修改其他配置信息。

    余路那么长,还是得带着虔诚上路...
  • 相关阅读:
    [LeetCode]Sliding Window Maximum
    判断两根线段是否相交
    求幂,我居然又没做出来
    C++集合运算函数总结 & 需要有序集合的操作
    effective stl读书笔记 & stl里面提供的算法 & emplace & ostream_iterator
    利用位操作的几道题目
    C++的new_handler
    TCP的可靠性 窗口滑动 拥塞控制
    关于高性能网络编程的一些知识
    三种连接 & DOS & SYNFLOOD & 防御
  • 原文地址:https://www.cnblogs.com/itiaotiao/p/12626463.html
Copyright © 2011-2022 走看看