blog/env.md at 5d7689c63ba5b187fcac5424468aea40c39bc228

4.0 KiB

Raw Blame History

title

date

Vue环境搭建

安装node.js

下载安装

node.js 官网（https://nodejs.org/en/）

下载下来安装包：

双击进行安装，此处下一步下一步按照提示操作即可

可以在这个步骤修改node安装路径

默认安装项目

到这一步的时候已经安装完毕了。

设置路径

设置nodejs prefix（全局）和cache（缓存）路径

建立全局/缓存文件夹

在nodejs安装路径下，新建node_global和node_cache两个文件夹

设置文件夹

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

设置全局模块存放路径

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

执行完没有报错，即为成功

设置成功后，之后用命令npm install XXX -g安装以后模块就在D:\vueProject\nodejs\node_global里

基于 Node.js 安装cnpm（淘宝镜像）

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

设置环境变量（非常重要）

说明：设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径

鼠标右键"此电脑"，选择“属性”菜单，在弹出的“系统”对话框中左侧选择“高级系统设置”，弹出“系统属性”对话框。
修改系统变量PATH

打开系统属性 -> 环境变量

在系统变量中选择Path，打开环境变量配置。

填入node_global目录路径

新增变量 NODE_PATH

安装VUE

cnpm install vue -g

安装VUE命令行工具

vue-cli 脚手架

cnpm install vue-cli -g

创建VUE项目

使用命令新建项目

vue init webpack 项目名称

命令执行之后会有一些操作指示，按指定输入操作即可。

项目目录：

build 最终发布代码的存放位置
config 配置目录，包括端口号等项目配置
node_modules 执行npm install 后产生的目录，包含node.js和npm依赖的文件以及后续安装的第三方组件或者第三方功能。
src 开发目录
- assets 放置图片等
- components 存放组件
- app.vue 主文件，项目入口
- main.js 核心项目文件
- router 路由配置
static 静态资源文件
.babelrc 设置转码规则和插件

启动项目

刚创建好的vue项目，我们需要为他安装依赖。

进入到项目路径下，使用命令：

cnpm install

启动命令：

cnpm run dev

剩下的就是按照我们自己的需求开发前端页面啦！

附录

node.js 官网 vue 官网 iview 框架网址 elementUI 框架网址

4.0 KiB Raw Blame History Unescape Escape