vue入门(一)新建一个vue项目,搭建一个vue-cli2 脚手架(vue 项目)

第一步 安装npm

首先Vue的安装依赖于node.js,要保证你的计算机上已经安装过node.js,如果电脑上有node.js,可以跳过node安装,如果没有就先安装node

  1. 安装node,下载node
    下载之后默认安装,直到完成安装

  2. 查看是否安装成功,可以查看安装npm 的版本
    打开控制台 电脑图标键 + R 输入 cmd 然后enter 就可以进入或者 shift + 右键

命令行中输入:
npm -v
node -v

vue入门(一)新建一个vue项目,搭建一个vue-cli2 脚手架(vue 项目)_第1张图片
在node里面是包含有 npm 的,如果不是最新版的npm 可以 npm install -g npm 更新版本。

第二步 项目初始化

全局安装 vue-cli

npm install vue-cli --g

查看 vue-cli 是否安装成功

vue list

vue入门(一)新建一个vue项目,搭建一个vue-cli2 脚手架(vue 项目)_第2张图片
然后选定一个你放项目的位置,新建vue 项目 ,可以 cd 目标路径,也可在目标路径下面 右键 + shift

新建 vue 项目

vue init webpack '自定义的项目名称'

之后会询问几个问题如下:
vue入门(一)新建一个vue项目,搭建一个vue-cli2 脚手架(vue 项目)_第3张图片
创建完成之后,切换到项目里面 (cd my-project
安装依赖包

 npm install

然后在运行

npm run dev

此时浏览器新打开一个页面大致如图:
vue入门(一)新建一个vue项目,搭建一个vue-cli2 脚手架(vue 项目)_第4张图片

此时的项目结构就是这样:vue入门(一)新建一个vue项目,搭建一个vue-cli2 脚手架(vue 项目)_第5张图片
文件的介绍:
vue入门(一)新建一个vue项目,搭建一个vue-cli2 脚手架(vue 项目)_第6张图片
这个是只能在本地运行的,如果想要在自己的服务器上运行的话,需要打包项目

npm run build

会生成静态文件,在dist文件夹里面,里面的index.html, 就是服务器访问的路径制定到这里就可以访问我们自己的项目

你可能感兴趣的:(vue)