Vue实验1：运行第一个vue项目

一.明确目标

1.安装node.js 

为了用其中的npm命令下载 vue-cli

npm是全球最大的开源库生态系统

 

2.用npm安装 cnpm

npm的东西都在国外，下是可以下他们的东西，但是很慢

我们曲线救国，用cnpm,这东西是国内的开源库

镜像使用淘宝的

 

3.用cnpm安装 vue-cli

vue-cli，这里的cli是（command-line interface），而不是client客户端的意思

应该是个用命令行的方式配置vue的工具

vue-cli又叫vue脚手架工具

 

在编程中的脚手架可以这样理解：

有人帮你把这个开发过程中要用到的工具、环境都配置好了，你就可以方便地直接开始做开发，专注你的业务，而不用再花时间去配置这个开发环境，这个开发环境就是脚手架。

类似你去操作某个数据，有个东西会监听数据，你只管修改这个数据，不用去管数据库，和数据库有关的操作人家帮你做了，页面也会自己渲染，不用你去管。

 

4.创建vue项目

那么也就是说，我们的目的就是搞出这个vue-cli（vue脚手架工具），那么我们就能愉快的和vue一起玩了。

 

5.简单指令步骤

npm config set prefix "J:\ITSoftWare\node\node_global\node_modules"

npm config set cache "J:\ITSoftWare\node\node_cache"

 

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

 

配置cnpm环境变量

cnpm install -g vue-cli

 

vue init webpack 项目名称   (当前路径下生成vue项目)

如vue init webpack myfirstvue

 

cnpm install（依赖生成）

 

npm run dev （运行vue项目）

 

二.具体流程

1.百度node.js，进入官网，下载

2.安装node.js

最好选个英文路径吧，反正这种让你弄不清东南西北的东西，不整中文路径就不会有一些莫名其妙的东西

3.验证node是否安装成功（cmd下）

只有配置了环境变量，才可以让cmd检测到你想用的软件。

最近有些软件都会帮你自动配置环境变量了，见怪不怪了，不过这个node好像没提醒你就自己添加了环境变量，是有点调皮的。

 

4.安装cnpm与修改全局安装

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

你可以直接敲入上方代码下载cnpm

但是这个-g的是意思是全局下载，它会把下载的东西放C盘，很可恶，我C盘还有5个G，我得想想办法，阻止这么可怕的事情。 路径:C:\Users\用户名\AppData\Roaming\npm

接下来就修改安装路径，然后下载cnpm，再验证这个修改路径的方法是否生效

通过命令： npm config ls可以查看npm的配置

#1.在node安装路径下新建两个文件夹

#2.npm配置（cmd）

这个prefix里就是npm的安装路径

npm config set prefix "J:\ITSoftWare\node\node_global\node_modules"

npm config set cache "J:\ITSoftWare\node\node_cache"

 

#3.安装cnpm

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

#4.给cnpm配置环境变量（让cmd找到cnpm）

当然你也可以选择cd到cnpm的路径下，不配环境变量

5.安装vue-cli

cnpm install -g vue-cli

输入 vue -V （V大写） 验证是否安装完成

你可能会问这个东西安装的东西在哪里，应该在npm指定的prefix下面

但是我的c盘貌似变大了，但是东西确实在npm安装路径下

 

6.新建vue项目（最好cd到其他盘）

输入下方指令会在当前目录新建一个vue项目

vue init webpack 项目名称

如 vue  init webpack myfirstvue

然后要输入一些配置信息，就那个eslint以下都点no，这东西是个代码规范，据说是多输一个空格都会报错

7.给当前目录生成依赖

cnpm install

 

8.运行程序

npm run dev

 

三、小结

这个博主很懒，没有小结。

其实搞了一天这个东西，还是糊里糊涂的。

我就想看看前端那里到底发生了什么.......

感觉读不了英文文档说明，简直活不下去。