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版本。

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

3 基础知识

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

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

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

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

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

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

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

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

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\

改为:

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

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

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

9.2 选择Manually select features自定义配置

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

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)