Vue入坑——vuecli(脚手架)搭建

coding

一起学vue——vue学习总路线

——————————^~^我是萌萌哒分割线^~^————————————————

语法学了,现在就该实操了。

安装个脚手架试试。

一、安装环境

(1)、安装node

先从node.js官方下载,安装过程很简单,这里就不赘述了(傻瓜式安装)

    安装完成后,用命令行输入:node -v,显示版本号,就说明安装成功

安装好node以后就自带npm安装包管理工具了,npm的服务器是国外的,因此会很慢,也许对后面的操作产生影响,因此在这里安装淘宝镜像:

输入:

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完之后,输入:cnpm -v,显示版本号则安装成功

(2)、安装webpack

输入:

npm install webpack -g

这里的-g是全局安装的意思,如果不想全局安装可以不要

安装好后,还是查看一下版本号以确认是否安装成功:webpack -v

(3)、安装vue-cli脚手架:

输入:

npm install vue-cli -g

安装完后输入:vue -V(V是大写哦!)

二、构建项目

通过以上步骤,环境我们都搭建好了,现在开始构建我们的项目

1、在你想要建项目的目录下,打开命令行,如果安装了git,可以使用git bash here

2、输入:vue init webpack vueclipractice

这里的vueclipractice是项目名称,自己随便起,但是不能用中文哈

好啦,项目创建好了,看看刚刚新建的那个项目是不是存在了

3、进入项目,安装依赖

npm install 

4、安装vue路由模块和网络请求模块

cnpm install vue-router vue-resource --save

好了,现在就弄完了,看看目录长什么样

5、我用编译器打开,解释一下各个目录各个文件都是干嘛使得。

6、启动项目

输入:

npm run dev

成功后显示下图

在浏览器输入localhost:8080

注意:8080端口不要被占用

好啦,到此为止vue-cli就搭建好了。下一步就可以来认识一下vue-cli的项目结构

——————————^~^我是萌萌哒分割线^~^————————————————

                                                                                        下一篇:认识vue-cli的项目目录结构

以上是 Vue入坑——vuecli(脚手架)搭建 的全部内容, 来源链接: utcz.com/z/508762.html

回到顶部