flask + vue 学习

目录

一、nodejs安装

1、下载安装包Node.js 官方网站下载：https://nodejs.org/en/download/

2、安装：双击打开安装，下一步下一步即可（笔者安装路径为“D:\Program Files\nodejs”）

3、配置npm在安装全局模块时的路径和缓存cache的路径

4、测试

二、vue环境搭建步骤

1、搭建需要的环境和工具

2、创建项目

3、安装依赖

4、运行

---

 

一、nodejs安装

1、下载安装包Node.js 官方网站下载：https://nodejs.org/en/download/

2、安装：双击打开安装，下一步下一步即可（笔者安装路径为“D:\Program Files\nodejs”）

   安装成功，测试安装是否成功，运行CMD，分别输入node -v 和 npm -v 分别查看node和npm的版本号

安装完成后系统目录如图所示（其中，npm随安装程序自动安装，作用就是对Node.js依赖的包进行管理）：

3、配置npm在安装全局模块时的路径和缓存cache的路径

因为在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中，不方便管理且占用C盘空间，

所以这里配置自定义的全局模块安装目录，在node.js安装目录下新建两个文件夹 node_global和node_cache，如图所示：

然后在cmd命令下执行如下两个命令：

npm config set prefix "D:\Program Files\nodejs\node_global"

npm config set cache "D:\Program Files\nodejs\node_cache"

执行完后，配置环境变量，如下：

• “环境变量” -> “系统变量”：新建一个变量名为 “NODE_PATH”， 值为“D:\Program Files\nodejs\node_global\node_modules”，如下图：

• “环境变量” -> “用户变量”：编辑用户变量里的Path，将相应npm的路径（“C:\Users\用户名\AppData\Roaming\npm”）改为：“D:\Program Files\nodejs\node_global”，如下：

配置完成。 

4、测试

 在cmd命令下执行 npm install webpack -g 安装webpack，如下图所示：

 

 

安装成功，自定义文件夹如下所示：

 

 

 

 在cmd命令下执行 webpack -v 查看webpack版本，如下图所示：

 

二、vue环境搭建步骤

1、搭建需要的环境和工具

• cnpm npm的淘宝镜像，命令：npm install -g cnpm --registry=http://registry.npm.taobao.org/
• cnpm install -g vue-cli 或 npm install -g vue-cli

2、创建项目

在cmd里输入：vue init webpack  ”项目名称“

3、安装依赖

现在已经创建好了，那就让项目先安装下依赖再运行一下，会出现下面的页面，操作指令是：

cnpm install

cnpm run dev

注意 这里要在sell下进行安装和运行哦!!!

4、运行

利用vue-cil初始化构建vue项目，我们会获得一个初始化的文件夹结构，如下：