新建Vue项目步骤
Vue
项目的创建可以采用cdn
和CLI
两种方式,cdn
可以通过在项目中引入<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
来使用vue
。但在构建vue
的生产项目时一般采用CLI
的方式,下面将介绍如何使用CLI
脚手架来创建一个vue
项目。
一、下载并安装Node.js
下载地址
下载完成后在命令行输入node -v
,显示node
版本信息如下,表明 安装成功
二、下载Vue CLI脚手架
-
进入命令行模式,使用
npm install -g vue-cli
命令安装全局的Vue CLI
脚手架,如果嫌npm
太慢,可以使用淘宝提供的cnpm
来安装,cnpm
的安装和配置可参考如下网站:cnpm的安装和使用。如果是在公司内网开发,可以把源切换成公司的源:npm
切换源的方法 -
安装完成后,可以使用
vue --version
命令来查看vue cli
是否安装成功,输入命令后显示如下信息表示安装成功:
三、生成项目模板
-
使用
vue init webpack my-project
生成一个名为my-project
的项目模板,结果如下:[外链图片转存失败(img-R4NjXjk4-1567577751629)(C:\Users\w1509\AppData\Roaming\Typora\typora-user-images\1566147458542.png)]
-
模板生成完后,使用
npm install
命令下载项目依赖的模块,如果已经在第一步中选择安装完依赖后执行该命令,则不需要手动输入,项目在初始化完成后会自动执行该命令。 -
以上两步执行完后,使用
cd my-project
命令进入到该项目的目录下,执行npm run dev
运行该项目,结果如下: -
在浏览器中输入
http://localhost:17112
,显示如下界面,表明Vue
项目已成功创建
7112,显示如下界面,表明Vue
项目已成功创建