VUE环境搭建与创建项目简易手册

VUE环境搭建与创建项目简易手册

1. 安装node.js: Vue.js环境搭建需要用到node.js的npm命令,用到node.js其他命令则很少,但npm命令时必须的,所以首先需要安装node.js.

Node.js安装可直接通过Node.js 中文网网站进行下载安装:

VUE环境搭建与创建项目简易手册_第1张图片

        安装完成后,记得配置环境变量路径,才能调用npm命令:

VUE环境搭建与创建项目简易手册_第2张图片

        在环境变量中配置刚才安装时设置的路径:比如安装时,将C盘改为D盘,则路径为D:\Program Files\nodejs.可以看到这个路径下确实有一个叫npm文件,指定环境变量后,在运行npm命令时即可系统自动在此目录下寻找npm命令.

VUE环境搭建与创建项目简易手册_第3张图片

VUE环境搭建与创建项目简易手册_第4张图片

2. 因npm从国外服务器下载资源,速度较慢,推荐采用cnpm,从国内淘宝镜像服务器下载,速度会快很多.

cnpm安装命令: npm install -g cnpm –registry=https://registry.npm.taobao.org

如果安装后cnpm无法运行,提示此命令不是内部或外部命令,我们可添加cnpm命令路径到环境变量中,参考: CSDN

  1. 运行cnpm install -g vue-cli命令安装vue脚手架:

VUE环境搭建与创建项目简易手册_第5张图片

  1. 用脚手架生成项目可以采用两种方法,

其一:采用vue init webpack projectName命令,并在提示窗口中输入项目名称等信息,并在Y/N的问题上,均输入”y”,大概意思是生成项目是否用到eslint(代码检查),e2e(自动化测试)等工具.

需要注意的是: 在下载template时,可能创建项目失败,因远程服务器连接不稳定,可多试几次,直到创建成功.

VUE环境搭建与创建项目简易手册_第6张图片

VUE环境搭建与创建项目简易手册_第7张图片

笔者曾在创建过程中报error,经重新安装node.js最终解决,可能是因node.js为历史安装版本,导致部分命令无法成功运行,因此大家注意按前面步骤重新安装.也可尝试npm cache clean –force等命令后重新安装.

安装完成后启动项目采用:

cd projectName

npm run dev

其二是使用vue-cli3图形界面:

运行命令安装vue-cli3: cnpm install -g @vue/cli

VUE环境搭建与创建项目简易手册_第8张图片

VUE环境搭建与创建项目简易手册_第9张图片

运行vue -V查看vue版本:

此时运行以下命令可以启动vue图形界面:vue ui

VUE环境搭建与创建项目简易手册_第10张图片

可在http://localhost:8000/project/select下,选择文件夹路径创建vue项目

VUE环境搭建与创建项目简易手册_第11张图片

怎么样?图形界面是不是更加直观,易用?

再看下面的选项,其他各选项我就不一一介绍内,重点在”任务”下,可针对”开发环境”(运行app),生产环境(打包生成可放到生产环境的项目文件)运行该项目.

VUE环境搭建与创建项目简易手册_第12张图片

在”任务”选项下,点击”运行”/”停止”按键,几秒钟后由此即可显示为”✔”状态,

VUE环境搭建与创建项目简易手册_第13张图片

点击”启动app”,即可启动我们新创建的vue项目:

VUE环境搭建与创建项目建议手册:

  1. 安装node.js: Vue.js环境搭建需要用到node.js的npm命令,用到node.js其他命令则很少,但npm命令时必须的,所以首先需要安装node.js.

Node.js安装可直接通过Node.js 中文网网站进行下载安装:

VUE环境搭建与创建项目简易手册_第14张图片

安装完成后,记得配置环境变量路径,才能调用npm命令:

VUE环境搭建与创建项目简易手册_第15张图片

在环境变量中配置刚才安装时设置的路径:比如安装时,将C盘改为D盘,则路径为D:\Program Files\nodejs.可以看到这个路径下确实有一个叫npm文件,指定环境变量后,在运行npm命令时即可系统自动在此目录下寻找npm命令.

VUE环境搭建与创建项目简易手册_第16张图片

VUE环境搭建与创建项目简易手册_第17张图片

  1. 因npm从国外服务器下载资源,速度较慢,推荐采用cnpm,从国内淘宝镜像服务器下载,速度会快很多.

cnpm安装命令: npm install -g cnpm –registry=https://registry.npm.taobao.org

如果安装后cnpm无法运行,提示此命令不是内部或外部命令,我们可添加cnpm命令路径到环境变量中,参考: CSDN

3.运行cnpm install -g vue-cli命令安装vue脚手架

cnpm install -g vue-cli命令:

VUE环境搭建与创建项目简易手册_第18张图片

4. 用脚手架生成项目可以采用两种方法:

    下面分别介绍vue-cli和vue-cli3图形界面

(1):采用vue init webpack projectName命令,并在提示窗口中输入项目名称等信息,并在Y/N的问题上,均输入”y”,大概意思是生成项目是否用到eslint(代码检查),e2e(自动化测试)等工具.

需要注意的是: 在下载template时,可能创建项目失败,因远程服务器连接不稳定,可多试几次,直到创建成功.

VUE环境搭建与创建项目简易手册_第19张图片

VUE环境搭建与创建项目简易手册_第20张图片

笔者曾在创建过程中报error,经重新安装node.js最终解决,可能是因node.js为历史安装版本,导致部分命令无法成功运行,因此大家注意按前面步骤重新安装.也可尝试npm cache clean –force等命令后重新安装.

安装完成后启动项目采用:

cd projectName

npm run dev

(2).使用vue-cli3图形界面:

运行命令安装vue-cli3: cnpm install -g @vue/cli

VUE环境搭建与创建项目简易手册_第21张图片

VUE环境搭建与创建项目简易手册_第22张图片

运行vue -V查看vue版本:

此时运行以下命令可以启动vue图形界面:vue ui

VUE环境搭建与创建项目简易手册_第23张图片

可在http://localhost:8000/project/select下,选择文件夹路径创建vue项目。

笔者选择在D:\vuecli3\vuecli3-test(这里创建路径时,我没有看到路径下的文件夹列表,创建文件夹时不够方便,应该是个vue图形界面操作待优化点)。

VUE环境搭建与创建项目简易手册_第24张图片

        怎么样?图形界面是不是更加直观,易用?

        再看下面的选项,其他各选项我就不一一介绍内,重点在”任务”下,可针对”开发环境”(运行app),生产环境(打包生成可放到生产环境的项目文件)运行该项目.

VUE环境搭建与创建项目简易手册_第25张图片

        在”任务”选项下,点击”运行”/”停止”按键,几秒钟后由此即可显示为”✔”状态,

VUE环境搭建与创建项目简易手册_第26张图片

        点击”启动app”,即可启动我们新创建的vue项目:

VUE环境搭建与创建项目简易手册_第27张图片

Vue-cli3界面化操作更加人性化,现在正式开启vue项目开发之旅!

希望文章能够帮助到更多人,谢谢!

你可能感兴趣的