vue-cli 构建vue项目

师父说,咱们还是要用vue-cli 去构建前端项目。然后我就开始了 懵逼之旅。 今天上午主要就是搞懂用webpack和vue-cli怎么搭建 运行项目

首先找到了咱们博客园 园友的博客,提供了大概五个步骤吧。

1.装node.js

装完这个就可以用npm命令去装其它东西了。

出版本号了 就代表装成功了

2.装vue-cli

npm install -g vue-cli

在node的命令行界面 或者cmd的命令行 都可以输入这行命令

同理 出了版本号 就代表装成功了。

3.使用vue-cli初始化项目

vue init webpack-simple myproject

这句话呢 其实就是开始构建项目了,做一些初始化的操作。init是初始化的意思,webpack-simple是模板名称,myproject是项目名称。后面两个都是可变的。

具体来说看这边官方解释

那么template具体有哪些选项呢 又都是什么意思呢?

上面的英文 大家应该都能理解 我就不翻译了。

大概意思就是 你用了哪个模板 会对应下载一些内容,像咱们用的webpack-simple 会下载一个简单的webpack 和vue-loader包。过程可能有些久 需要耐心等待。

下载完了之后会出现很多初始化的选项 需要你去填写选择。比如你的项目描述 作者信息,是否需要sass之类的。

这步完成后 你可以打开myproject文件夹 会发现生成了一些配置信息文件 包括你用的vue版本啊,你的用户信息之类的 还有webpack 配置文件等等

这里出现了乱码 可能是我编码格式的锅吧

4.cd myproject

这个意思很简单 就是说打开myproject 这个文件夹。

这个步骤是因为 你在命令行打开了文件后 下一个步骤的安装依赖包 都会自动安装到这个文件夹下。本人作死研究发现 如果缺少了这一步,那么依赖包会下载在当前目录下 你会很懵逼。

5.安装依赖

npm install

这步会根据 你都在第三步的设置 去装很多很多很多的依赖包。所以需要耐心等待。并且你的内存会飙升 不要害怕 都是正常的。

这步完成后会多一个node_modules的文件夹 这个文件夹下 都是你刚刚下载的依赖包。很多 很多。。。

6.运行

npm run dev

这步输完 会弹出这个界面 表示成功了

可能你要问 为什么run dev就成功了,dev是什么?这个是在你的package.json文件中 默认的一个设置,如果你想切换成 你自己的页面 那你需要去改dev对应的路径.

或者 你也可以不叫dev 叫个别的名字 都可以。

基本就是这样啦

时间: 2024-07-31 20:02:08

vue-cli 构建vue项目的相关文章

使用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 查看项目 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+webpack构建一个项目

1.安装CLI命令的工具  推荐用淘宝的镜像 npm install -g @vue/cli @vue/cli-init 2.使用命令构建一个名为myapp的项目 vue init webpack myapp vue -v 可以查看版本号(V大写)----------------------------构建项目信息详解 - Project name:项目名 - Project description: 项目描述 - Author: 作者 - Vue build: - 第一种:配合大部分的开发人员

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学习笔记之vue cli 构建项目

一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 node -v,如下图,如果出现相应的版本号,则说明安装成功 因为在官网下载安装node.js后,就已经自带npm(包管理工具)了,要意的是npm的版本最好是3.x.x以上,以免对后续产生影响. 2.安装淘宝镜像 npm install -g cnpm --registry= https://regis

利用脚手架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 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 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 目