如何创建新的vue项目--从安装node到创建成功

如何创建新的vue项目–从安装node到创建成功2019-9-12

最近刚开始学习vue, 完全小白一枚, 由于版本和顺序问题捯饬了好久才创建好一个简单的vue项目. 下面就是我整理的创建vue项目的过程:

1.安装nodejs

    (1). 进入nodejs官网(点击进入nodejs官网)

    (2). 点击导航栏上方的DOWNLOADS,然后选择要下载的类型(建议下载LTS稳定版本)

    (2).在文件夹中找到刚刚下载的node-v10.16.3-x64.msi, 双击安装, 然后一路next直到安装成功.

2.查看环境是否齐全

    在自建的vue工作目录下打开命令窗口CMD,查看node和npm是否安装完毕.

node -v  //查看node版本
npm -v  //查看npm版本

3. 安装vue-cli脚手架构建工具，输入命令 npm install -g vue-cli

npm install -g vue-cli

4. 创建vue项目

    (1). 使用教授级vue-cli创建项目, 在命令窗口(CMD)中执行: vue init webpack “项目名称”
        例如:

vue init webpack vue_demo

    (2).按照自己需求选择, 然后回车

    (3).创建完成后如下图:

5. 启动项目

    (1).根据上一步图片中的提示,进入创建好的项目中:

cd vue_demo  //切换到项目中

启动vue项目:

npm run dev //启动vue项目

过程如图:

    (2). 打开任意一个浏览器,根据上图中的提示,在地址栏中输入: http://localhost:8080, 然后回车

成功!

vue新项目的创建到这里就结束了. 学习是一个探索的过程, 一定要自己动手试, 切忌眼高手低 !