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和端口,还可以根据需要修改其他配置信息。

    余路那么长,还是得带着虔诚上路...
  • 相关阅读:
    HDU2059(龟兔赛跑)
    pat 1012 The Best Rank
    pat 1010 Radix
    pat 1007 Maximum Subsequence Sum
    pat 1005 Sign In and Sign Out
    pat 1005 Spell It Right
    pat 1004 Counting Leaves
    1003 Emergency
    第7章 输入/输出系统
    第六章 总线
  • 原文地址:https://www.cnblogs.com/itiaotiao/p/12626463.html
Copyright © 2011-2022 走看看