vue-cli3脚手架搭建

一、下载安装node.js

1、Node.js简介

简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。开始我以为是一门语言,其实只是一个平台。Node.js 的包管理器 npm,是全球最大的开源库生态系统。

2、下载Node.js

打开官网下载链接,下载对应版本自定义安装。包含了node.js和npm。

安装完成后,wind+r 弹出输入cmd打开命令窗口,输入node -v 和 npm -v 分别查看版本号,代表node.js和npm安装完成。

3、修改设置环境变量

安装完node,就自动在path里增加环境变量。这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,是因为以后在执行类似:npm install express [-g] (后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中(默认),占C盘空间。

为了以后的本地部署项目,需要自定义安装和缓存。找到node.js的安装根目录,在当中新建“node_global”和"node_cache"两个文件夹。

"node_global"即以后全局模块安装下载路径。"node_cache"即以后缓存路径。

在cmd窗口依次执行命令

npm config set prefix "F:\project\vue\nodeJs\node_global"

npm config set cache "F:\project\vue\nodeJs\node_cache"

配置环境变量

NODE_PATH = F:\project\vue\nodeJs

PATH = %NODE_PATH%\;%NODE_PATH%\node_modules;%NODE_PATH%\node_global;

环境变量配置完成,这样就可以把后面全局安装的装到node_global里并且可以直接用命令使用。

二、npm安装

1、npm安装淘宝镜像

cmd执行npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装淘宝npm镜像,以后再用到npm的地方直接用cnpm来代替就好了。(因为npm在国内下载速度是很慢,所以就用npm下载安装cnpm可以更快的下载后面的依赖等等。)

2、npm安装vue-cli

cmd执行(c)npm install-g @vue/cli(不用淘宝镜像可忽略前面的"c"),安装vue-cli3(3开始安装方式改为这个)。

cmd执行vue -V查看版本即安装成功。

三、创建第一个vue工程

1、打开创建工程的目录

cmd在对应目录中执行 vue create 工程名,开始创建vue工程。

2、创建项目对应选项

default (babel, eslint),默认选项,包含babel和eslint。

Manually select features,自定义创建配置工程。

选择自定义。

Babel,支持es6语法转换(常用)。

TypeScript,微软提供的js超集。

Progressive Web App (PWA) Support,渐进式的网页应用程序。

Router,路由(常用)。

Vuex,Vuex是Vue.js应用程序的状态管理模式+库

CSS Pre-processors,Sass/Less预处理器(常用)。

Linter / Formatter,代码风格检查(常用)。

Unit Testing,支持单元测试。

E2E Testing,支持E2E测试。

选择对应配置完成工程创建。

3、初次运行vue工程

创建完成后会有对应运行提示。打开工程目录,npm run serve运行工程。

打开url即为此vue工程运行显示。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容