vue学习(一)从零开始搭建vue项目

从零开始搭建vue项目

  • 下载node
  • 下载vue-cli脚手架
  • 创建项目
  • 运行项目
  • webpack打包

下载node

地址:https://nodejs.org/en/download/
vue学习(一)从零开始搭建vue项目_第1张图片
下载完成后点击下一步安装,安装完成后在终端输入:node -v查看是否安装好

在这里插入图片描述
因为服务器是在国外的,用npm安装vue-cli脚手架可能会下载不下来,所以我们更推荐用淘宝镜像安装
1.切换淘宝镜像:npm config set registry http://registry.npm.taobao.org
2.查看是否切换成功:npm config get registry
vue学习(一)从零开始搭建vue项目_第2张图片

下载vue-cli脚手架

npm install -g vue-cli 这样安装下来的是vue-cli2,如果要安装vu enpm install -g @vue/cli (mac要加sudo 例:sudo npm install -g vue-cli )
查看是否下载好:vue -V (V记得大写)
在这里插入图片描述

创建项目

vue init webpack
这个是vue-cli2创建项目的方式,vue create是vue-cli3的初始化方式
Vue init webpack project-name
project-name是你创建的项目名,然后回车安装,后面提示是否安装其他东西如vue-router、eslint ,直接enter跳过,也可以选择不安装

运行项目

1.npm install
2.npm run deve
项目创建完成后,用WebStorm开发工具打开项目,安装基础模块npm install
然后输入npm run deve运行项目

vue学习(一)从零开始搭建vue项目_第3张图片
浏览器中输入http://localhost:8080 查看运行效果
vue学习(一)从零开始搭建vue项目_第4张图片

webpack打包

vue学习(一)从零开始搭建vue项目_第5张图片
打包完成之后会产生一个dist文件夹,将其下的资源部署到服务器上即可访问
vue学习(一)从零开始搭建vue项目_第6张图片

你可能感兴趣的:(vue)