windows node.js 安装

最近基础到vue 看到vue-cli 我以前是用vue.js 文件渲染前台的文件

那么vue-cli是干嘛的啊

带着疑问，带着好奇，我看到了一篇博客

https://blog.csdn.net/muzidigbig/article/details/80490884

这篇博客介绍了三种node.js的安装方式

我明白原来node.js 是一种脚本环境

我们直接安装吧

进入node的官网:https://nodejs.org/en/

下载了成之后是一个windows安装包，直接运行

检查node.js是否安装成功：

node -v

安装这个安装包的同时npm也会自动的安装，检查安装情况

npm -v

npm是一种安装的命令，我们可以修改安装下载的镜像

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

下面可以使用cnpm进行操作安装了

安装vue-cli

cnpm install -g vue-cli

 

判断vue-cli是否运行成功：

然后判断webpack是否已经安装

中途需要输入yes 

重新输入webapck

发现各种都安装好了

通过以上三部，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目。

首先我们要选择存放项目的位置，然后再用命令行cd到项目的目录中，在这里，我选择在c盘下创建新的目录（wdgvue目录），用cd 将目录切到该目录下，如下图：

在wdgvue目录下，在命令行中运行命令 vue init webpack firstApp（初始化一个完整版的项目） 。解释一下这个命令，这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中firstApp是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中（我的实例中，会在wdgvue目录生成该文件夹）

vue init webpack

 

最后生成的项目如下：

项目生成之后要使用：

   介绍一下目录及其作用：

     build：最终发布的代码的存放位置。

     config：配置路径、端口号等一些信息，我们刚开始学习的时候选择默认配置。

     node_modules：npm 加载的项目所需要的各种依赖模块。

     src：这里是我们开发的主要目录（源码），基本上要做的事情都在这个目录里面，里面包含了几个目录及文件：

             assets:放置一些图片，如logo等

             components:目录里放的是一个个的组件文件

             router/index.js：配置路由的地方

             App.vue：项目入口组件（跟组件），我们也可以将组件写这里，而不使用components目录。主要作用就是将我们自己定义的组件通过它与页面建立联系进行渲染，这里面的<router-view/>必不可少。

             main.js ：项目的核心文件（整个项目的入口js）引入依赖包、默认页面样式等（项目运行后会在index.html中形成一个app.js文件）。

     static：静态资源目录，如图片、字体等。

     test：初始测试目录，可删除

      .XXXX文件：配置文件。

     index.html：html单页面的入口页面，可以添加一些meta信息或者同统计代码啥的或页面的重置样式等。

     package.json：项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。

     README.md：项目的说明文件。

     webpack.config.js：webpack的配置文件，把.vue的文件打包成浏览器能读懂的文件。

     .babelrc:是检测es6语法的文件的配置

     .getignore:忽略文件的配置（比如模拟本地数据mock不让他在get提交/打包上线的时候忽略不使用可在这里配置）

     .postcssrc.js:前缀的配置 

     .eslintrc.js:配置eslint语法规则（在这里面的rules属性中配置让哪个语法规则失效）

     .eslintignore:忽略eslint对项目某些文件的语法规则的检查

 

    这就是整个项目的目录结构，其中，我们主要在src目录中做修改（模块化开发）。这个项目现在还只是一个结构框架，整个项目需要的依赖资源都还没有安装
 

 cd  项目名；进入项目中

    安装项目所需要的依赖包/插件（在package.json可查看）：执行 cnpm install   (npm可能会有警告，这里可以用cnpm代替npm了，运行别人的代码需要先安装依赖)如果创建项目的时候没有报错，这一步可以省略。如果报错了  cd到项目里面运行  cnpm install   /  npm install
 

安装完成之后，我们到自己的项目中去看，会多一个node_modules文件夹，这里面就是我们所需要的依赖包资源。

安装完依赖包资源后，我们就可以运行整个项目了。

运行项目

    在项目目录中，运行命令 npm run dev （npm run start），会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

最终结果：