win10 安装node.js 使用 npm vue-cli 脚手架

win10 安装node.js 使用 npm vue-cli 脚手架

一、 安装 node.js

1、下载 node.js

Node.js 官方网站下载：https://nodejs.org/en/
选择对应的系统版本

2、安装 node.js

打开下载的安装文件，双击开始安装

3、查看 node.js 版本

打开 cmd

查看node 版本，出现版本号代表已经安装成功了

node -v

查看npm版本号

npm -v

查看webpack版本号

npm webpack -v

4、安装 node.js 淘宝镜像 cnpm

速度更快 以后可以用 cnpm 命令安装我们需要的工具

npm install -g cnpm - -registry=https://registry.npm.taobao.org

查看 版本信息

cnpm -v

二、 vue-cli 脚手架

1、下载 vue-cli

用我们上面 安装的 cnpm 安装，速度很快 -g 是全局安装

cnpm install -g @vue/cli

查看vue 版本，V要大写的

vue -V

2、使用 vue-cli

官方文档地址

（1）用cmd 命令行创建项目

在对应的 文件夹路径下面执行 vue create + 项目名

vue create my-vue

会提示你需要什么样的 preset，第一个 default是默认的设置，我们可以看自己的需求选择第二种

这里我们先选一些必要的测试一下就行，按空格选中，回车确认，我这里选了 Router 还有 Vuex

接下来我一路回车，这个具体的配置选项，可以另外去深入了解一下 创建项目中

这里有个提示

进入我们的项目文件夹

cd my-vue

运行我们的项目

npm run serve 

运行成功之后 在浏览器输入对应的项目路径

浏览器访问 这样我们的一个项目就创建成功了

（2）用vue官方提供的UI界面创建项目

用命令行可能有些麻烦，也不美观，vue团队已经帮我们提供了一个 图形化界面

第一步，在cmd 运行

vue ui

我们可以看到帮我们在默认浏览器开启了一个管理的页面，我们只需在这里创建我们需要的项目即可

第二步，点击创建，选择创建项目的文件夹，开始创建

第三步，选择自己项目的配置，我这边选手动

还是选了 Router 和Vuex

第四步，这里让我们选择一种插件化的javascript代码检测工具。这个可以自己去了解一下ESlint 地址

创建项目中

第五步，创建成功，我们会看到这个界面

点击左侧导航栏的 任务–>点击serve–>点击启动，启动我们的项目

等到出现这个 运行成功的标志之后，点击启动app

我们就可以看到我们的项目了