Window 环境在 NodeJS 配置 Vue 环境及项目运行（IDEA版）

检测 NodeJS 环境及 cnpm

• 

安装 vue-cli

• # 安装 vue-cli
  cnpm install vue-cli -g
  
  # 测试是否成功
  # 查看可以基于哪些模板创建 vue 应用程序，通常我们选择 webpack
  vue list

• 
• 

第一个 vue-cli 应用程序

• 创建一个 vue 项目，并使用管理员模式在 DOS 窗口进入该目录
• 
• 
• 创建一个基于 webpack 模板的 vue 应用程序

• # 这里的 myvue 是项目名称,可以根据自己的需求起名
  vue init webpack myvue

• 

初始化并运行

• # 进入到vue项目目录
  cd myvue
  
  # 安装依赖
  npm install
  
  # 运行项目
  npm run dev

• 安装依赖
• 
• 运行项目
• 

在 IDEA Open 项目

• 使用 IDEA 方便我们查看项目结构
• 
• 

安装 Webpack

• Webpack 是一款模块加载兼打包工具，它能把各种资源，如：JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用

• # 安装
  npm install webpack -g
  npm install webpack-cli -g

• 
• 

• # 测试安装
  webpack -v
  webpack-cli -v

• 

使用Webpack

• IDEA Open 一个空项目
• 创建要给名为 modules 的目录，用于放置 JS 模块等资源文件
• 在 modules 下创建模块文件，如：hello.js，用于编写 JS 模块相关代码

• // 暴露一个方法
  exports.sayHi = function () {
      document.write("<h1>FutureLL, ES6 规范</h1>");
  };

• 在 modules 下创建一个名为 main.js 的入口文件，用于打包时设置 entry 属性

• // 接收一个方法
  var hello = require("./hello");
  hello.sayHi();
  

• 在项目目录下创建 webpack.config.js 配置文件，使用 webpack 命令打包

• module.exports = {
      entry: './modules/main.js',
      output: {
          filename: "./js/bundle.js"
      }
  }

• 打包项目

• F:\IDEA\vue\webpack-study>webpack
  Hash: f3f86b22d65a2587a0b3
  Version: webpack 4.43.0
  Time: 344ms
  Built at: 2020/06/10 上午10:37:05
           Asset   Size  Chunks             Chunk Names
  ./js/bundle.js  1 KiB       0  [emitted]  main
  Entrypoint main = ./js/bundle.js
  [0] ./modules/main.js 72 bytes {0} [built]
  [1] ./modules/hello.js 110 bytes {0} [built]
  
  WARNING in configuration
  The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
  You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
  

• 完成之后发现项目多了一个 dist 目录

• 

• 将打包后的包导入

• <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <body>
  
  <script src="dist/js/bundle.js"></script>
  
  </body>
  </html>

• 在此页面打开浏览器，查看是否输出相关内容

• 

安装 vue-router

• vue-router 是一个插件包，所以我们需要使用 cnpm/npm 来进行安装，打开命令行工具，进入项目目录，输入如下命令：

• npm install vue-router --save-dev

• 
• 如果在一个模块化工程中使用它，必须通过 Vue.use() 明确的安装路由功能：

• import Vue from 'vue'
  import VueRouter from 'vue-router'
  
  Vue.use(VueRouter);

• 

测试

• 删除项目中没有用的东西
  • src中没用的东西
• 在 components 目录下存放自己编写的组件
  • 
• 定义一个 Content.vue 和 Main.vue 的组件
  • 
• 安装路由，在 src 目录下，新建一个文件夹：router 专门用于存放路由
  • 
• 在 main.js 中配置路由
  • 
• 在 App.vue 中使用路由
  •