vue 模块化开发_1

1.安装 nodejs

ps：前后端分离必备环境

1. 下载地址 http://nodejs.cn/download/

2. 安装完成后打开cmd 输入node -v 或 npm -v 查看是否安装成功

2.idea安装插件

1. 安装vue.js插件
   idea > file > settings > plugins >搜索vue 安装
   

2. 安装node.js插件
   idea > file > settings > plugins >搜索nodejs安装
   
   安装完成后重启idea

3.idea内搭建项目

1. 创建静态web项目
   笔者项目名为“vue_test”
   

2. 打开终端
   项目中打开终端 右键项目-选择 open in terminal

3. 安装webpack
   webpack（模块化构建项目用） 终端输入 npm install webpack -g
   
   

4. 安装淘宝镜像
   （下载vue更快）终端输入 npm install -g cnpm --registry=https://registry.npm.taobao.org（ps;笔者有安装过，所以提示内容可能不一样）
   

5. 安装vue-cli
   （构建vue项目）终端输入cnpm install vue-cli -g（ps：笔者安装过了，提示内容不一样，不报错就行）
   

6. 初始化项目
   vue init webpack vue_test (ps：vue_test为项目名，注意图内红色下划线的选no，其余默认回车)
   

7. 进入项目路径
   cd vue_test （PS：进入你上一步init 创建的项目内
   安装项目依赖 npm install（PS：注意项目路径是否正确，后面启动项目可能会报xxx-loader 未安装 运行npm install xxx-loader 进行安装）
   
   如果安装完你的项目结构如下 那就说明项目初始化完成了
   
   如果是下面这样子，没有node_modules或者里面只有一个文件，那就说明依赖没安装成功，检查一遍项目路径
   

8. 运行项目
   输入 npm run dev （PS：一定是当前项目内即package.json所在目录执行）
   
   打开终端输出的地址 http://localhost:8080 访问出现下图 则搭建完成