Vue手把手带你入门(一) nodejs安装配置以及vue-cli脚手架创建第一个vue项目（超级详细）

开发Vue程序的第一步就是PC安装配置node.js

1官网下载安装Node(我的安装路径是D:\nodejs\)

点我安装(安装在除C盘外任意一个磁盘中)

2 检查node和npm是否安装完成

下载安装完毕后：在node.exe这个根目录下使用cmd,然后输入node -v命令查看node.js的版本,安装node的时候npm包管理工具同时集成在nodejs中了。可以同时查看npm版本。

3 基础知识

当你安装node的时候选择的安装路径系统会将其自动添加到系统变量path路径中(在DOS运行命令中会先从这些路径中找起来)

4 全局安装路径以及缓存路径
我将全局模块路径和缓存路径放在我node.js安装的文件夹中，则在我的Node安装路径:D:\nodejs下创建两个文件夹node_global及node_cache。

此时打开cmd,输入两个命令设置npm的全局安装路径和缓存路径

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

设置完成后，可以使用如下两个命令检查是否配置完成：

npm config get prefix;

npm config get cache

5 node环境变量配置(新建系统变量NODE-PATH)

关闭cmd窗口，“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”

进入环境变量对话框，在系统变量下新建 NODE_PATH，输入D:\nodejs\node_global\node_modules

6 node环境变量配置(bianji 用户变量Path)

原来的path为C:\用户\xxx\AppData\Roaming\npm\

改为:

7 进行全局模块安装
打开cmd输入：npm install express -g （-d可以加上查看详情，也可以不加）

npm install express -g 完成后即可使用node.js和npm开发vue项目了。

8 加菜

开发vue项目可以下载官网推荐IDE HBuilder(轻量级好用)，创建vue-cli脚手架项目可以使用HBuilder进行创建

但是最好用CMD创建然后用HBuilder打开

创建vue-cli2项目使用的命令是:npm install -g vue-cli

当然我们要跟着潮流走啦：

创建vue-cli3项目使用的命令是:npm install -g @vue/cli (该命令的作用是全局安装vue-cli3.0脚手架,Vue CLI 3需要 nodeJs ≥ 8.9)

然后检测vue是否安装，命令:vue -V

开始第一个vue项目之旅吧: vue create hello_world

9 继续加菜

9.1 第一个提示:让你你选择一个preset

9.2 选择Manually select features自定义配置

9.3 是否使用历史router

Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由，为了实现SPA（single page application）单页应用，需要引入前端路由系统（vue-router）。

前端路由的核心是：改变视图的同时不会向后端发出请求。

为了达到这个目的:改变视图的同时不会向后端发出请求:

浏览器提供了 hash 和 history 两种模式。这两种模式都能改变视图的同时不会向后端发出请求。...题外话有点多啦，先抛个砖头嘿嘿。

9.4 选择css预处理器（为了追求潮流我选择Sass/SCSS with node-sass）

9.5 选择javascript代码检测工具（ESLint + Prettier，对代码格式要求很高，格式不好会报很多警告和错误.....）

9.6 什么时候检测代码呢？(ctrl + s以后我喜欢)

9.7 选择单元测试

? Pick a unit testing solution: (Use arrow keys) ：据说都选择Jest，作为一名后端开发，我是不太了解这些了，也没用过啦

9.8 如何存放配置(专门放在config文件中)

vue-cli升级到3之后，减少了很多的配置文件，将所有的配置项都浓缩到了vue.config.js这个文件中，所以学懂并会用vue.config.js文件很重要。

9.9 是否记录本次配置（当然要记录了，下次创建新项目就方便了许多）

来自:geekAntony

Vue手把手带你入门(一) nodejs安装配置以及vue-cli脚手架创建第一个vue项目（超级详细）相关推荐

RPA之家手把手带你入门Blue Prism教程系列2_如何安装并且配置Blue Prism免费试用版
RPA之家手把手带你入门Blue Prism 安装Blue Prism 第一步:下载Licence和试用版的Blue Prism 第二步:安装Blue Prism 第三步:登录并激活Blue Pris ...
RPA之家手把手带你入门Blue Prism教程系列1_如何申请Blue Prism免费试用版
RPA之家手把手带你入门Blue Prism Blue Prism 免费试用版第一步:申请一个BluePrism Portal账号第二步:在DX网站申请一个测试license 第三步:申请成功后, ...
手把手带你入门深度学习（一）：保姆级Anaconda和PyTorch环境配置指南
手把手带你入门深度学习(一):保姆级Anaconda和PyTorch环境配置指南一. 前言和准备工作 1.1 python.anaconda和pytorch的关系二. Anconda安装 2.1 ...
vue手把手带你创建聊天室（vue-native-websocket）
vue手把手带你创建聊天室(vue-native-websocket) 谓套接字(Socket),就是对网络中不同主机上的应用进程之间进行双向通信的端点的抽象.一个套接字就是网络上进程通信的一端,提供 ...
RPA之家手把手带你入门Blue Prism教程系列 -汇总
RPA之家手把手带你入门Blue Prism 基础篇 -本文章由RPA之家(rpazj.com)提供, 学习交流群QQ群465620839 微信交流群: 基础篇 RPA之家手把手带你入门Blue Pr ...
linux 中国-新手村,从新手村开始，手把手带你入门梳理内核代码
原标题:从新手村开始,手把手带你入门梳理内核代码在上一期内容中,Java离Linux内核有多远? 我们介绍了从 JVM 到内核的编译原理,告诉大家应用和系统工程师如何接触到内核. 本文将从一个简单 ...
RPA之家手把手带你入门Blue Prism教程系列4_认识Blue Prism的界面
RPA之家手把手带你入门Blue Prism 1. Home & Analytics 2. Studio 2.1 Process 2.2 Object 2.3 Process与Object的关 ...
RPA之家手把手带你入门Blue Prism教程系列7_深入了解Data Item
RPA之家手把手带你入门Blue Prism 1. Data Item类型 2. Data Item的表现形式 2.1 Environment Variable(环境变量) 2.2 Session V ...
RPA之家手把手带你入门Blue Prism教程系列3_如何新建用户和配置数据库
RPA之家手把手带你入门Blue Prism 创建用户第一步:寻找Security标签下的Users 第二步:配置Users 配置数据库第一步:新建数据库第二步:配置数据库 -本文章由RPA之家 ...

Vue手把手带你入门(一) nodejs安装配置以及vue-cli脚手架创建第一个vue项目（超级详细）

Vue手把手带你入门(一) nodejs安装配置以及vue-cli脚手架创建第一个vue项目（超级详细）相关推荐

最新文章

热门文章