node.js操作visio流程图 node js vue

第一个Vue-cli

**准备：**下载安装好node.js（官网下载，傻瓜式安装）

node -v //查看node版本
npm -v //查看npm版本

安装淘宝镜像（这里设置为全局）此安装仅为加速而安装

npm install cnpm -g #安装淘宝镜像
cnpm install vue-cli -g  #安装vue-cli端
vue list #检测是否安装成功

Vue-cli安装及安装效果检测

开始第一个Vue-cli项目

问题：什么是Vue-cli？

vue-cli是官方提供的一个脚手架，用于快速生成一个vue的项目模板；

  预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个估计项目就是脚手架，我们的开发更加的快速；项目的功能

• 统一的目录结构
• 本地调试
• 热部署
• 单元测试
• 集成打包上线
• 使用cmd进入项目存放目录

#创建一个Vue项目，我们随便建立一个空的文件夹在电脑上，
#E:\CodeSource\Idea_2019.3.3\Vue
#1、首先需要进入到对应的目录 cd /d E:\CodeSource\Idea_2019.3.3\Vue
#2、这里的myvue是项目名称，可以根据自己的需求起名
vue init webpack myvue 
//创建一个webpack的vue，因为目前还有些浏览器使用ES5，所有要降级处理，所以使用webpack
**操作说明：**
? Project name myvue  //项目名
? Project description A Vue.js project //项目描述
? Vue build standalone
? Install vue-router? No  //是否初始化路由
? Use ESLint to lint your code? No  //初始化代码
? Set up unit tests No//建立测试文件
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no  //是否使用npm install初始化你的项目

这个时候就已经创建好了

npm install 
#初始化项目，安装依赖，完毕之后生成 node_modules 文件夹

遇到错误及解决

Error [ERR_STREAM_WRITE_AFTER_END]: write after end

对npm降级处理

npm i -g npm@5.6.0

Webpack

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

安装

npm install webpck -g
npm install webpck-cli -g

查看版本

webpack -v
webpack-cli -v

WebPack 安装出现 Cannot find module 'webpack-cli/package.json’的错误解决

**
当在控制台输入webpack的时候其实运行的是 node_modules\node_modules\webpack\bin\webpack.json这个文件，他会根据是否安装有webpack-cli或者是webpack-command进行处理，当没有安装其中之一就会告诉你需要下载webpack-cli,如果只有安装webpack-cli就会利用require.resolve获取webpack-cli/package.json的路径，然后根据这个路径加载模块。我的设备的问题就是获取这个文件的路径错误导致webpack命令执行失败，由于不想把时间花在为什么获取文件路径失败原因
解决步骤如下：

1. 进入文件夹D:\NodeJs\ins\node_global\node_modules\node_modules\webpack\bin找到package.json
2. 在152行，将pkgPath改为绝对路径
3. 路径名为 D:\NodeJs\ins\node_global\node_modules\node_modules\webpack-cli\package.json

就可以成功执行了。

注意出现反斜杠的地方需要不全反斜杠

个人心得：NodeJs与Vue打交道时，很多错误都是自己对于Vue项目的构建过程不熟悉，以及webpack、vue-cli等安装混乱导致，头脑一定要清晰，每一步是干什么，为什么这样做要一清二楚！