跳至主要內容

Vue新建项目

三思原创大约 3 分钟前端vue前端vuejsvue-cli

本文介绍了如何在新建一个基于Vue的项目。从安装Node.js和npm开始,然后使用npm安装Vue和Vue CLI工具。通过Vue CLI创建一个基于webpack模板的项目,并进行必要的包安装。最后,通过npm运行项目,实现浏览器中查看Vue项目。

image
image

Vue新建项目

vue--新建项目

https://www.zhihu.com/people/mou-mai-91open in new window

这是一篇技术贴--如何新建一个基于vue的项目,不讲官方文档基础知识,只分享实际项目操作~

1、下载对应版本的nodejs安装,下载的nodejs都集成了npm,所以nodejs安装完成之后npm也对应安装完成了。
安装完成之后可以在cmd命令中查看一下是否安装完成,出现对应的版本号即安装完成。
node -vnpm -v

2、npm成功安装之后,就可以用npm命令安装vue,npm install vue​,可能会出现如下错误,那是因为没有package.json文件

image

当遇到这个问题的时候,再在cmd中执行一下npm init -f​,就可以生成package.json文件

3、vue提供官方的命令行工具vue-cli,可以快速搭建大型的单页面应用。只需几分钟就可以搭建。
#全局安装vue-cli$ npm install --global vue-cli

4、cli工具安装完成之后,就可以进入创建vue项目的步骤了,进入你要建项目的目录,创建一个基于webpack(不了解webpack的可以先了解一下)模板的项目
#创建一个基于webpack模板的新项目$ vue init webpack my-project​ 这是建立一个复杂的vue项目
$ vue init webpack-simple my-project​ 这是建立一个简单的vue项目,可以省去许多不要用的文件,只留下有用的文件
可以两个命令都试一下,我一般都是用simple命令,可以省去很多没用的文件

5、项目建立之后在对应的目录下就会出现你刚刚建立的文件夹,进入你建立的文件夹,执行$ cnpm i 命令,会自动安装一些vue项目需要的压缩包之类的文件。

(cnpm安装:npm install -g cnpm --registry=https:registry.npm.taobao.org​输入cnpm -v​查看是否安装成功 因为npm是挂载在国外的所以会比较慢,安装国内的映像会比较快)

6、安装完成之后运行npm run dev命令运行项目,就可以在浏览器中浏览建立的最简单的vue项目了。