vue创建项目（npm安装→初始化项目→发布）

npm：是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题。比如常用的有：　　1）允许用户从NPM服务器下载别人编写的第三方包到本地使用。　　2）允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。　　3）允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。第一步 npm安装首先：先从nodejs.org中下载nodejs 


如图，下载8.9.3LTS（推荐给绝大部分用户使用的）双击安装 


一直Next 







可以使用默认路径，本例子中自行修改为d:\nodejs




点击Install安装



点击Finish完成查看目录是否有以下的文件 


打开控制命令行程序（CMD）,检查是否正常 








如果不是最新版本，运行一下代码即可。运行指令npm install -g npm这样npm就更新到最新版本了。使用淘宝 NPM 镜像大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:$ npm install -g cnpm --registry=https://registry.npm.taobao.org这样就可以使用 cnpm 命令来安装模块了：$ cnpm install [name]第二步 初始化项目利用vue-cli初始化构建vue项目，我们会获得一个初始的文件夹结构，下面是详细的介绍。



第一步：安装vue-cli
cnpm intall vue-cli -g



第二步：检查是否安装成功
查看vue-cli是否成功，不能检查vue-cli，需要检查vuevue -V查看vue的版本号vue list






第三步：初始化
vue init webpack “名称”名称就是创建项目的名称，暂时叫做vue-me



如果在执行上述 操作之后，你遇到如下的错误，导致不能运行



上述的报错是由于使用cnpm安装的，导致后面缺了很多库
所以我们使用npm重新install一次,注意是npm,这个时间可能会有点长.






6cnpm run dev 运行程序，在浏览器我们就能看到我们初始化的vue的项目了。
 第三步，打包发布（测试版为例）1、在当前项目中运行指令：npm run build;



2、运行成功后显示



然后会在你的项目文件中发现一个dist文件夹，这就是你要打包后需要发版的文件（根据自己的需要更改dist的文件夹名字）



然后连接到服务器，将打包好的文件上传到根目录下就算正式完成了



vue项目打包后，文件找得到，但是引用的字体及背景图片找不到；更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置：if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', // 注意配置这一部分，根据目录结构自由调整 fallback: 'vue-style-loader' })} else { return ['vue-style-loader'].concat(loaders)}
本文引用：https://www.cnblogs.com/laizhouzhou/p/8027908.html https://jingyan.baidu.com/article/0a52e3f4eced5abf62ed720b.html

vue创建项目（npm安装→初始化项目→发布）npm：是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题。比如常用的有：　　1）允许用户从NPM服务器下载别人编写的第三方包到本地使用。　　2）允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。　　3）允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。第一步 npm安装首先：先从nodejs.org中下载nodejs 


如图，下载8.9.3LTS（推荐给绝大部分用户使用的）双击安装 


一直Next 







可以使用默认路径，本例子中自行修改为d:\nodejs




点击Install安装



点击Finish完成查看目录是否有以下的文件 


打开控制命令行程序（CMD）,检查是否正常 








如果不是最新版本，运行一下代码即可。运行指令npm install -g npm这样npm就更新到最新版本了。使用淘宝 NPM 镜像大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:$ npm install -g cnpm --registry=https://registry.npm.taobao.org这样就可以使用 cnpm 命令来安装模块了：$ cnpm install [name]第二步 初始化项目利用vue-cli初始化构建vue项目，我们会获得一个初始的文件夹结构，下面是详细的介绍。



第一步：安装vue-cli
cnpm intall vue-cli -g



第二步：检查是否安装成功
查看vue-cli是否成功，不能检查vue-cli，需要检查vuevue -V查看vue的版本号vue list






第三步：初始化
vue init webpack “名称”名称就是创建项目的名称，暂时叫做vue-me



如果在执行上述 操作之后，你遇到如下的错误，导致不能运行



上述的报错是由于使用cnpm安装的，导致后面缺了很多库
所以我们使用npm重新install一次,注意是npm,这个时间可能会有点长.






6cnpm run dev 运行程序，在浏览器我们就能看到我们初始化的vue的项目了。
 第三步，打包发布（测试版为例）1、在当前项目中运行指令：npm run build;



2、运行成功后显示



然后会在你的项目文件中发现一个dist文件夹，这就是你要打包后需要发版的文件（根据自己的需要更改dist的文件夹名字）



然后连接到服务器，将打包好的文件上传到根目录下就算正式完成了



vue项目打包后，文件找得到，但是引用的字体及背景图片找不到；更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置：if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', // 注意配置这一部分，根据目录结构自由调整 fallback: 'vue-style-loader' })} else { return ['vue-style-loader'].concat(loaders)}