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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue


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项目，我们会获得一个初始的文件夹结构，下面是详细的介绍。



  1. 第一步：安装vue-cli

cnpm intall vue-cli -g



  1. 第二步：检查是否安装成功

查看vue-cli是否成功，不能检查vue-cli，需要检查vue

vue -V查看vue的版本号

vue list




  1. 第三步：初始化

vue init webpack “名称”

名称就是创建项目的名称，暂时叫做vue-me




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

  1. 上述的报错是由于使用cnpm安装的，导致后面缺了很多库

所以我们使用npm重新install一次,注意是npm,这个时间可能会有点长.




  1. 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项目，我们会获得一个初始的文件夹结构，下面是详细的介绍。



  1. 第一步：安装vue-cli

cnpm intall vue-cli -g



  1. 第二步：检查是否安装成功

查看vue-cli是否成功，不能检查vue-cli，需要检查vue

vue -V查看vue的版本号

vue list




  1. 第三步：初始化

vue init webpack “名称”

名称就是创建项目的名称，暂时叫做vue-me




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

  1. 上述的报错是由于使用cnpm安装的，导致后面缺了很多库

所以我们使用npm重新install一次,注意是npm,这个时间可能会有点长.




  1. 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)}


以上是 vue创建项目（npm安装→初始化项目→发布） 的全部内容， 来源链接： utcz.com/z/375902.html

回到顶部