Vue-打包

先了解一下node.js是什么
Node.js是一个基于 Chrome V8 引擎的 JavaScript 运行时。

工程中需要导入各种js框架，为了方便管理，需要npm包管理器，npm是node.js中的一部分。安装好node即可使用。

什么是webpack及作用?
打包所有的资源，使浏览器都能正常识别文件。

Vue-loader作用

vue-loader 是 webpack 的一个 loader，用于处理 .vue 文件。可以将vue文件转换为JS模块。

搭建vue工程步骤

1. 安装node.js
   
2. 配置npm的taobao镜像
   npm： 是node package manager的简称，用于Javascript的软件的包管理器。
   中文官网：https://www.npmjs.cn/
   官网： https://www.npmjs.com/
   文件位置：C:\Users \ [录前用户] \ .npmrc

npm镜像配置

# 更换仓库源：
npm config set registry https://registry.npm.taobao.org/

# 设置npm仓库位置：
npm config set prefix  "D:\nodejs\global_modules"
npm config set cache  "D:\nodejs\node_cache"
	
# 查看npm配置信息
npm config list

# 查看版本
npm -v

npm常用命令

# 安装
 npm install <package_name>
 npm install -g -d  <package_name>
     
# -g  全局  -d  加入项目依赖
     
# 卸载
npm uninstall <package_name>
     
# 更新
npm update <package_name>

3. 配置环境变量（未更换可以不用配置）

path=“E:\node\global_modules”

4. 安装vue脚手架

# 安装命令 npm i -g <包名称>
     
# 比如@vue/cli npm i - g @vue/cli
 
# 查看vue版本 vue -V

5. 安装webpack

# 安装webpack打包程序
npm i -g webpack

# 安装webpack-cli脚手架
npm i -g webpack-cli

# 查看版本
webpack -v

4. 创建工程
   在浏览器中打开url:
   
   
   
   bable:把新的js语法转换为浏览器能识别(要)。

TypeScript:js的超类(不需要)

CSS pre-processor: 处理less,sass样式（不需要）

ESLint: 检查语法（不需要）

配置文件：webpack的配置文件（要）

7. 运行项目：
   打开终端，进入工程目录：

# 安装工程的所有依赖(新工程)
npm install

# 运行工程
npm run serve

# 编译工程(把vue工程的资料打包到dist中)
npm run build

8. 安装其它指定依赖

# save: 把安装的依赖添加到当前工程
npm install --save axios vue-axios

Vue的工程目录结构

public目录


App.vue:相当于index.html首页

main.js: 相当于Vue的程序入口