用vue-cli初始化vue项目

1.安装node环境

使用node -v 检查你的node版本号,如果出现版本号则表示你的node环境安装成功;

2.安装vue-cli

$ npm install -g vue-cli

安装成功之后,我们可以对我们的项目起一个名字

$ vue init webpack myFirstVue

其中webpack是指模板名称,模板名称有webpack,webpack-simple ,browserify ,browserify-simple ,simple,而我们这里使用的是webpack。myFirstVue指的是项目名称。

然后再根据指示把作者、密码等一些基本信息填写进去

3.运行vue

cd myFirstVue:进入这个项目中

npm install:安装

npm run dev:运行

运行完成之后会出现以下界面:

如果把http://localhost:8080/放在浏览器中打开,就会出现我们这个项目的首页:

出现以上界面,就代表我们已经完成第一步了,然后你可以仿照这个写一个简单的页面了。

时间: 2024-10-25 13:41:07

用vue-cli初始化vue项目的相关文章

vue cli 3 查看项目 vue.config.js 的默认配置信息

vue cli 3 查看项目 vue.config.js 的默认配置信息 运行命令,在终端输出: npx vue-cli-service inspect 运行命令,将输出导入到文件:vue.config.detail.js: npx vue-cli-service inspect >> vue.config.detail.js 在文件:vue.config.detail.js 开头,添加:module.exports =,然后格式化即可查看. 原文地址:https://www.cnblogs.

[Vue CLI 3] vue inspect 的源码设计实现

首先,请记住: 它在新版本的脚手架项目里面非常重要 它有什么用呢? inspect internal webpack config 能快速地在控制台看到对应生成的 webpack 配置对象. 首先它是 vue 的一个扩展命令,在文件 @vue/cli/bin/vue.js 中定义了 command 还是依赖了工具包 commander const program = require('commander') 代码配置如下: program .command('inspect [paths...]

使用@vue/cli初始化项目

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli. 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 卸载它.附上vue-cli官方文档地址 首先检查你的node版本,Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+),命令为 node --version 1.安装vue-cli,-g表示全局安装,这样你才可以直接在命令行使用该指令,否则不行 npm insta

vue cli 3.x 项目部署到 github pages

github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. https://github.com/nusr/resume-vue 1. vue-router 不要开启 history 模式 路径中的 # 比较丑,就开启了 vue-router 的 history 模式,去掉了 #.平时做项目也是默认开启 history 模式.折腾了半天发现,我这是部署到 g

利用脚手架vue cli搭建vue项目

vue.js https://vuejs.org/ 基础: http://cn.vuejs.org/v2/guide/installation.html 1.安装需要利用npm包管理器,所以首先安装node.js https://nodejs.org/en/download/ 安装好后,打开cmd面板,输入 node -v  (v即 version ,查看node版本) npm是随nodeJs一起安装.所以输入 npm -v 说明npm也已经好了. (安装nodejs后,里面的npm可能不是最新

使用Vue CLI构建Vue项目

第一步:首先在控制台输入vue --version,如果出现版本号则进入第三步:否则进入第二步: 第二步:输入npm install cnpm -g --registry=https://registry.npm.taobao.org,安装淘 宝镜像,以后安装其他依赖时候就可以输入cnpm install --- 了,因为npm安装会非 常慢,一般来说会失败: 第三步:控制台输入vue init webpack my-project  注:这里的my-project就是你要创建的 项目的名称,自

Vue CLI 3.x搭建Vue项目

一.Node安装 windows 1. Node.js (>=8.9, 推荐8.11.0+) Node官网下载 .msi 文件,按步骤下载安装即可. 安装完之后在cmd中输入 node -v,若显示版本号,则说明安装成功. 2. Git(命令行终端) Git官网下载安装即可. Linux apt-get install nodejs node -v apt-get install npm npm -v npm命令1.得到原本的镜像地址 npm get registry 2.设置成淘宝 npm c

vue搭建vue-cli脚手架项目

一.Node.js 1.介绍 Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.Node.js是一个基于Chrome V8引擎的JavaScript运行环境.它不是一门语言,其实就是一个运行javascript的运行环境(平台),可以理解为一个运行js的虚拟机,以前只有浏览器才可以解析Javascript代码,有了Nodejs之后可以脱离浏览器运行,简单的说就是Node.js是运行在服务端的JavaScr

Vue CLI 3搭建vue+vuex 最全分析

一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack 和 webpack-dev-server 之上(提供 如:serve.build 和 inspect 命令) CLI 插件:给Vue 项目提供可选功能的 npm 包 (如

【实战】Vue全家桶(vue + axios + vue-router + vuex)搭建移动端H5项目

使用Vue全家桶开发移动端页面. 本博文默认已安装node.js. github链接 一.准备工作 安装vue npm install vue 安装脚手架vue-cli npm install -g @vue/cli 创建webpack项目 vue init webpack my-app 运行 cd my-app npm run dev 按照提示,在浏览器打开http://localhost:8082/,效果如下: 安装状态管理vuex npm install vuex --save-dev 目