如何搭建一个vue项目(完整步骤)
如何搭建一个vue项目(完整步骤)
一、环境准备
1、安装node.js
- 下载地址:https://nodejs.org/zh-cn/
- 界面展示
2、检查node.js版本
查看版本的两种方式
1|node -v
2|node -version
出现版本号则说明安装成功(最新的以官网为准)
3、为了提高我们的效率,可以使用淘宝的镜像源
- 输入:npm install -g cnpm --registry=https://registry.npm.taobao.org 即可安装npm镜像源
- 以后再用到npm的地方直接用cnpm来代替就好了,因为没有镜像源的话,安装速度比较慢
- 检查是否安装成功:
cnpm -v
二、搭建vue环境
1、全局安装vue-cli
这里注意:安装vue-cli对node.js的版本是有要求的
装的两种方式:输入cmd命令
1|npm install -g @vue/cli //这个是从国外下载的比较慢
2|cnpm install -g @vue/cli //这个是从镜像源下载
查看安装的版本(显示版本号说明安装成功)
1|vue --version
如果你原来有版本或者版本比较低,可以升级
1|npm update -g @vue/cli
2|yarn global upgrade --latest @vue/cli
三、创建vue项目
1、用cmd命令创建项目
1.1创建文件
- 以管理员身份打开命令行界面,进入任意一个想要创建项目的文件夹
输入:vue create vue01
1.2选择配置信息
- 通过上下方向键选择对应配置,然后回车
- 按空格键选择要安装的配置资源,带 * 号说明被选上了
1.3选择版本
- 上下方向键选择版本,这里我们选择vue2,然后回车
1.4路径模式选择
- 这里可以不用管,直接输入 no/n
1.5语法代码格式检查
- 代码检查,选标准的就行,方向键切换,空格键选择然后回车
- 代码检查时间,方向键切换,空格键选择然后回车
1.6第三方文件存在的方式
- 1.独立的文件 2.综合的
1.7是否保存本次配置信息(保存预设)
- 这里如果选择保存的话,就要输入名字,默认就是文件夹的名字,下次配置的时候就会显示这个文件配置的选项就像上面的一样,在配置的时候会多出来一个
1.8创建成功
- Successfully created project vue01出现这个说明创建成功
1.9运行
- cd到项目文件夹下面
cd vue01
- 输入代码运行文件
npm run serve
1.10启动
- 在浏览器输入对应的网址就可以看到界面啦
http://localhost:8080/
1.11停止服务
- 两下Ctrl+C 或者Ctrl+C一下然后Y
2、用vue资源管理器创建
2.1进入vue资源管理器界面(vue ui界面)
- cmd命令,因为是全局的,所以在哪里打开都行,注意:运行的时候不能关闭cmd窗口,不然就停止服务了,如果电脑太卡,可以直接在浏览器输入:http://localhost:8000/
vue ui
2.2创建文件
- 这里直接create 创建文件
2.3配置信息
- 和用cmd命令差不多,填完之后下一步
2.4配置预设
- 选择预设,或者自定义,然后下一步完成创建
2.5启动运行项目
- 按步骤来:任务>serve>运行>启动
四、Vue-cli工程中每个文件夹和文件的用处
- dist 文件夹:默认 npm run build 命令打包生成的静态资源文件,用于生产部署
- node_modules:存放npm命令下载的开发环境和生产环境的依赖包
- public:有的叫assets:存放项目中需要用到的资源文件,css、js、images以及index
- src文件夹:存放项目源码及需要引用的资源文件
- src-api文件夹:放ajax相关操作的代码文件:index.js(相关的接口),ajax.js(封装的axios,拦截器)。有的叫service:自己配置的vue请求后台接口方法
- src-common文件夹:stylus的混合文件.styl,不要写到public也可以
- src-components文件夹:存放vue开发中抽离的一些公共组件
- src-mock文件夹:mock数据存放文件及mock模拟接口(没有后台接口或接口不完整情况下可以模拟后台接口)
- src-pages文件夹:涉及到路由的组件
- src-router文件夹:vue-router,路由器及路由的配置
- src-store文件夹:存放 vue中的状态数据,用vuex集中管理
- App.vue文件:使用标签渲染整个工程的.vue组件
- main.js文件:vue-cli工程的入口文件
- package.json文件:用于 node_modules资源部 和 启动、打包项目的 npm 命令管理
- build 文件夹:用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库,或者配置一下 UI 库
- config 文件夹:主要存放配置文件,用于区分开发环境、线上环境的不同,常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等
谢谢你的浏览奥,喜欢的话可以点个关注点个赞收藏哈,嘻嘻~~
如何搭建一个vue项目(完整步骤)相关推荐
- MacOS 搭建一个vue项目(完整步骤)
搭建一个Vue项目 一.安装node环境 二.搭建vue项目环境 1.全局安装vue-cli 2.检查是否安装成功 3.创建一个基于 webpack 模板的新项目 4.安装依赖 5.启动项目 三.vu ...
- 搭建一个Vue项目(完整步骤)
一.安装Node环境 具体请参考:http://www.dinganan.cn/nodej安装和配置/ 二.搭建vue项目环境 1.全局安装vue-cli npm install --global v ...
- 从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一)
从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一) 1.vue-cli搭建一个可靠成熟的项目 1.介绍 vue-cli 我是去年六月份接触的vue1.0,当时还是个菜逼,当 ...
- 如何搭建一个Vue项目和配置环境
如何搭建一个Vue项目和配置环境 一.Vue简介 Vue(读音/vju/, 类似于view) 是一套用于构建用户界面的渐进式框架, 发布于2014年2月.与其它大型框架不同的是, Vue被设计为可以自 ...
- 手把手教你从0开始搭建一个vue项目(完结)
前言 上一节webpack实战之(手把手教你从0开始搭建一个vue项目)最后我们完成了css样式的配置: webpack.config.js: const path = require("p ...
- 多个vue项目合并成一个_零基础搭建一个Vue项目,你学会了吗?
这几天利用业余时间做了一个个人项目,后端部分已经搭建好了还差一个前端,经过考虑前端利用Vue来搭建开发,因对Vue不是很熟悉,所以利用网络查找了相关的资料,成功的跑出了第一个Vue页面,写在此作为一个 ...
- vue入门级教程从零搭建一个vue项目
一.安装node环境 1.下载地址为:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3.为了提高我们的效率,可以使用淘宝的镜像:ht ...
- 抛开vue-cli 利用requireJS搭建一个vue项目
---恢复内容开始--- 现在学习vue都是利用脚手架vue-cli快速搭建一个项目,这是非常高效的方法,我是十分推荐的,但是有时候在没有互联网的情况,我们没办法在node环境下,敲一个nmp ins ...
- 如何搭建一个Vue项目
一.在搭建前,首先检查自己的搭建环境 使用cmd,打开命令行,使用node -v指令,查看自己的node版本(是否安装) 使用npm -v指令,查看自己的npm版本(是否安装) 二.搭建Vue项目环境 ...
- HBuilder 创建Vue项目完整步骤
1,在nodejs官网下载对应需要的版本 2,安装好之后,在本地cmd中,输入where node确定node路径,我这里路径是C:\Program Files\nodejs 3,在hbuilder. ...
最新文章
- ubuntu安装python3.6_Ubuntu16.04怎样安装Python3.6
- SAP RETAIL 补货类型RF之初探 II
- python Unicode转ascii码的一种方法
- 第一个实例-----我与node.js的第一步接触
- sharepoint2010 创建自定义列表
- 【渝粤教育】电大中专幼儿园课程论 (1)作业 题库
- php manager iis 8,PHPManager2下载
- Java怎么避免重复订单_javaEE高并发之如何产生唯一不重复订单号
- 从入门到入土:[SEED-Lab]MD5碰撞试验|MD5collgen实验|linux|Ubuntu|MD5 Collision Attack Lab|详细讲解
- 微信小程序四种父子相互传值方式
- HTML5 前端原生 WebSocket 通信
- C3P0连接池的配置方式
- CUDA 下载不了(只有 42B)的应急解决办法(暂时可用)
- 微信小程序之去除抖音、快手等视频平台水印!
- TeamViewer远程连接
- IT学生技术入门值得关注的网站(页)链接
- Product Requirement Document
- 关于chrome、360浏览器自动填充的黄色背景处理方案
- 嵌入式开发(四):海思Hi3559AV100交叉编译ffmpeg
- 08 css补充知识
热门文章
搭建一个Vue项目 一.安装node环境 二.搭建vue项目环境 1.全局安装vue-cli 2.检查是否安装成功 3.创建一个基于 webpack 模板的新项目 4.安装依赖 5.启动项目 三.vu ...
一.安装Node环境 具体请参考:http://www.dinganan.cn/nodej安装和配置/ 二.搭建vue项目环境 1.全局安装vue-cli npm install --global v ...
从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一) 1.vue-cli搭建一个可靠成熟的项目 1.介绍 vue-cli 我是去年六月份接触的vue1.0,当时还是个菜逼,当 ...
如何搭建一个Vue项目和配置环境 一.Vue简介 Vue(读音/vju/, 类似于view) 是一套用于构建用户界面的渐进式框架, 发布于2014年2月.与其它大型框架不同的是, Vue被设计为可以自 ...
前言 上一节webpack实战之(手把手教你从0开始搭建一个vue项目)最后我们完成了css样式的配置: webpack.config.js: const path = require("p ...
这几天利用业余时间做了一个个人项目,后端部分已经搭建好了还差一个前端,经过考虑前端利用Vue来搭建开发,因对Vue不是很熟悉,所以利用网络查找了相关的资料,成功的跑出了第一个Vue页面,写在此作为一个 ...
一.安装node环境 1.下载地址为:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3.为了提高我们的效率,可以使用淘宝的镜像:ht ...
---恢复内容开始--- 现在学习vue都是利用脚手架vue-cli快速搭建一个项目,这是非常高效的方法,我是十分推荐的,但是有时候在没有互联网的情况,我们没办法在node环境下,敲一个nmp ins ...
一.在搭建前,首先检查自己的搭建环境 使用cmd,打开命令行,使用node -v指令,查看自己的node版本(是否安装) 使用npm -v指令,查看自己的npm版本(是否安装) 二.搭建Vue项目环境 ...
1,在nodejs官网下载对应需要的版本 2,安装好之后,在本地cmd中,输入where node确定node路径,我这里路径是C:\Program Files\nodejs 3,在hbuilder. ...