使用Vue脚手架(vue-cli)从零搭建一个vue项目

注:在搭建项目之前,请先安装一些全局的工具(如:node,vue-cli等)

  • node安装:去node官网(https://nodejs.org/en/)下载并安装node即可,安装node以后就可以正常使用npm命令
  • 全局安装vue-cli工具:npm install vue-cli -g

开始创建项目:

  • 找一个合适的位置,打开命令窗口,使用vue初始化基于webpack的新项目

  

vue init webpack vue-demo  //注意名称太长的话它会有错误提示,就像VueDemo 我们可以写成vue-demo就可以了

如上图,它会又各种提示,还有需要安装的东西,可以自行按照自己的需求去安装东西。

生成以后它会在你刚开始选择的位置生成一个现成的vue的一个项目架子,就像这样:

启动项目:

npm run dev

根据上边的地址在浏览器菜单栏里边打开项目即可>

项目启动成功了,我们可以继续我们项目中所需要的工具,如:

npm install vue-router --save (路由管理模块)
npm install vuex --save (状态管理模块)
npm install vue-resource --save (网路请求模块)   

以下是脚手架生成的项目结构:

|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- dev-client.js                // 热重载相关
|   |-- dev-server.js                // 构建本地服务器
|   |-- utils.js                     // 构建工具相关
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 测试环境变量
|-- src                              // 源码目录(里面可以自定义文件结构)
|   |-- components                     // vue公共组件
|   |-- store                          // vuex的状态管理
|   |-- App.vue                        // 页面入口文件
|   |-- main.js                        // 程序入口文件,加载各种公共组件
|-- static                           // 存放静态文件的文件夹,比如一些图片,json数据等
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- README.md                        // 项目说明
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息,第三方依赖的文件列表

原文地址:https://www.cnblogs.com/Scar007/p/8946681.html

时间: 2024-10-20 20:54:15

使用Vue脚手架(vue-cli)从零搭建一个vue项目的相关文章

使用vue-cli脚手架自动化搭建一个vue项目

最近在学习使用vue,简单汇总下如何使用vue-cli脚手架自动化搭建一个vue项: 1.首先,要安装node.js,之后第一步检测是否安装node:没有安装node的同学请到官网下载安装 https://nodejs.org/en/download/ 安装成功后在命令行查看node版本,如果有说明安装成功. 2.之后全局安装vue-cli脚手架 电脑进入cmd,任意路径下 使用 npm命令:npm install vue-cli -g 注意:npm -v 3.0+   npm版本需要在3.0之

完整搭建一个vue项目

目录 一. 搭建一个vue项目的完整步骤 二. 卸载vue-cli 三. 完全卸载webpack 一. 搭建一个vue项目的完整步骤 1.安装node.js 下载地址 # 检查是否安装成功 node -v npm -v 2.为了提高下载效率,可以使用淘宝镜像 # 淘宝镜像 npm install -g cnpm -registry=https://registry.npm.taobao.org # 检查是否安装成功 cnpm -v 3.安装webpack打包工具 webpack中文文档 npm

vue-用Vue-cli从零开始搭建一个Vue项目

Vue是近两年来比较火的一个前端框架(渐进式框架吧). Vue两大核心思想:组件化和数据驱动.组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用:数据驱动是前端的未来发展方向,释放了对DOM的操作,让DOM随着数据的变化自然而然的变化(尤神原话),不必过多的关注DOM,只需要将数据组织好即可.本文用Vue-cli从零开始搭建一个Vue项目. 准备工作 1.下载安装Node.js 下载地址:https://nodejs.org/en/download/ ,选择合适自己的版本下载即可

创建Vue.js对象:我的第一个Vue.js输出信息

<!DOCTYPE html><html><head><meta charset=”utf-8″><title>Vue第一条信息</title><script src=”js/vue.js”></script></head><body><div id=”app”><p>{{ message }}</p></div> <script&g

如何使用脚手架搭建一个react项目

1.准备工作: 首先要知道,搭建一个react项目总是需要安装node.js和npm的,未安装的请移步node.js官网:https://nodejs.org/en/ 检测是否安装成功:npm -v 和node -v 2.npm安装脚手架 执行命令npm install create-react-app 3.使用npx和脚手架创建项目my_app,这个过程可能需要几分钟,请耐心等待 npx create-react-app my_app 这里用到了npx,就是可以让你不用全局安装create-r

vue.js使用vue-cli搭建一个SPA项目

WHY 之所以写这篇如何运用脚手架自动化构建出一个项目的大架构,主要是面向想入门vue的小伙伴.之前,我第一次接触vue,一直摸不着头脑,想在网上搜个接地气的教程都找不到.SO,我以如何搭建结构为开始,向想入门vue的童鞋们把我仅有的力量贡献出来,随后我会持续更新vue如何与ui框架结合使用:在低版本ie如何运用vwjs将其打包为桌面应用以及我在实际开发的过程中踩过的各种坑.欢迎大家观看与互相交流哦. HOW 话不多说,切入主题 1.首先,你的电脑需要nodejs环境,如果没有,点击下面链接去下

抛开vue-cli 利用requireJS搭建一个vue项目

---恢复内容开始--- 现在学习vue都是利用脚手架vue-cli快速搭建一个项目,这是非常高效的方法,我是十分推荐的,但是有时候在没有互联网的情况,我们没办法在node环境下,敲一个nmp install XXX帮我们搭建系统.这边也遇到了这样的情况,记录一下过程,备忘. 采用的方式是利用requireJS搭建一个遵循AMD规则的vue项目.关于这一块,大家可以百度一下,查询相关资料熟悉requireJS的使用. 第一步,都是建立一个如下常规的简单的工程结构: ----lib 存放js库文件

如何搭建一个vue项目(完整步骤)

参考资料 一.安装node环境 1.下载地址为:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3.为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.org/ 输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了. 检查是否安装成功: 二.搭建vue项目环境 1

简单搭建一个SSM项目

简单搭建一个用户管理的SSM项目框架,虽然也能用servlet+jdbc搭建更简单的,不过个人感觉工作中更多用的ssm框架项目,这里就简单用ssm来搭建需要的项目吧. 准备工具:eclipse.jdk1.7.Mysql.maven.tomcat.(请先确定计算机本身已安装好前面几个工具,myeclipse自动集成maven,eclipse需要自己先配置,具体配置请自行百度) 这里先把项目的目录结构显示下 好的,现在开始 File->new->other->maven project Ne