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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

cd projectName

npm run dev

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

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

运行vue -V查看vue版本:

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

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

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

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

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

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

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

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

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

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

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

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命令:

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

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

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

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

笔者曾在创建过程中报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 -V查看vue版本:

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

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

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

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

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

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

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

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

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