vus.js安装以及遇到问题总结

一、开发环境

vue推荐开发环境:
Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言。
npm: Nodejs下的包管理器。
webpack: 它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
vue-cli: 用户生成Vue工程模板。

安装node.js ，

参考：https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143450141843488beddae2a1044cab5acb5125baf0882000

Node.js平台是在后端运行JavaScript代码，
npm其实是Node.js的包管理工具（package manager）。
vue.js 常规安装过程：
参考：https://www.jianshu.com/p/de1332a34cef
https://www.cnblogs.com/yominhi/p/7039795.html
https://blog.csdn.net/Candy_mi/article/details/80764319 注意：配置了环境变量之后要重新打开cmd啊。

1、官网下载node ,（可能升级，当npm 低于3.0）
（windows 系统cmd中）
2、基于node.js,利用淘宝npm镜像安装相关依赖。由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像:（未安装用，先放着)
npm install -g cnpm --registry=https://registry.npm.taobao.org
3、安装vue-cli 脚手架工具
cnpm install -g vue-cli
//等待安装
vue
//回车，若出现vue信息说明表示成功
4、vue-cli构建项目，
vue init webpack my-project

下面会出现：

这里会出现下载缓慢问题：
解决方式：1、参考：
https://blog.csdn.net/lingting12116/article/details/81609194
可以实现，但是符不符合项目内容？

2、参考：https://blog.csdn.net/qq_23875297/article/details/56359262
暂时未成功
3、离线部署

这里不考虑

5、安装依赖
在cmd里

1).输入：cd my-project（项目名），回车，进入到具体项目文件夹

2).输入：cnpm install，回车，等待一小会儿

6、测试
cmd : cnpm run dev
在浏览里输入：http://localhost:8080(默认端口为8080)

7、退出
window ：ctrl + c

。。。。。。。。。。。。。。。。。。。
在
生成vue-webpack模板，文件目录结构如下:
官方参考如下：https://vuejs-templates.github.io/webpack/structure.html

在idea构建vue.js ：
参考：https://www.jianshu.com/p/dc087bf01475
未完待续。。。。

过程中相关的了解：

4、webpack

webpack：本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。
webpack主页：https://webpack.js.org/

简单记录下，详细看主页。
主要核心概念：
entry、output、loader、plugins
这里主要记录下loader/plugins
loader：能够让 webpack 处理那些非 JavaScript 文件，并且先将它们转换为有效 模块，然后添加到依赖图中，这样就可以提供给应用程序使用。
plugins:插件则可以用于执行范围更广的任务，插件的范围包括：打包优化、资源管理和注入环境变量。想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
module.exports = {
  entry: './path/to/my/entry/file.js',  //入口
  output: {  //出口
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }

 module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
      // loader 有两/个特征，
      //test 用于标识出应该被对应的 loader 进行转换的某个或某些文件
      //use:表示进行转换时，应该使用哪个 loade
    ]
  }
plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]

};

html-webpack-plugin 会为你的应用程序生成一个 html 文件，然后自动注入所有生成的 bundle。