vue脚手架的搭建

最新推荐文章于 2025-01-14 06:03:18 发布
转载 最新推荐文章于 2025-01-14 06:03:18 发布 · 94 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://segmentfault.com/a/1190000015215083
文章标签：

#javascript #操作系统 #webpack #ViewUI

一、安装并测试node.js

  • 前往node官网下载最新版本的node，根据自己的操作系统选择相应的包，按照步骤一步步安装；
  • Windows+R快捷键打开cmd窗口，输入node -v出现版本号，即安装成功！

图片描述

二、安装vue.js

  • 使用npm安装
  • npm: npm是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题
  • 由于 NPM 安装速度慢（服务器在国外），这里使用淘宝的镜像及其命令 cnpm
  • 安装淘宝的镜像：
  • 打开cmd命令框，输入
  • npm install -g cnpm –registry=https://registry.npm.taobao.org
  • 在命令框输入
  • cnpm install vue
  • vue安装完成

三、搭建脚手架

  • 全局安装vue-cli
  • 打开cmd命令框，输入
  • cnpm install -g vue-cli
搭建测试
  • 新建一个vue项目
  • 打开cmd命令框，输入 cd XXX，打开项目文件路径
  • 打开cmd命令框，输入 vue list ,查看可以使用的模板

图片描述

  • 打开cmd命令框，输入 vue,查看命令描述
  • 接下来，在命令框运行 vue init webpack test, 这里的test是项目的名字，接下来会有一些初始化的设置，其中vue-router是路由，ESLint为ES6的代码风格检查器，其他的可以回车跳过或者选择no
  • 安装完模板后会发现在vuedemo文件夹下面多了一个test文件
  • cd到test文件夹下，运行cnpm install,安装依赖
  • 启动 npm run dev

图片描述

  • 到这里，不出意外的话可以在浏览器里面看到Vue的初始化模板，如果没有可能是端口号被占用，这里就将配置文件config/index.js里面的端口号改掉就可以了
  • 另外还要补充一下，最后的打包如果在本地起服务器运行打包后的文件是无法运行的，会报错404，所以这里将assetsPublicPath里面的"/"改成"./"

附：相关文件介绍

图片描述

项目完成之后，在命令框输入 cnpm run build，会生成一个dist文件夹，将文件夹打包放到服务器
最全vue脚手架搭建教程
suny8的专栏
06-23 955
Vue CLI是一个基于Vue.js进行快速开发的完整系统，可以自动生成Vue.js+ webpack的项目模板。Vue CLI提供了强大的功能，用于定制新项目、配置原型、添加插件和检查webpack配置。@vue/cli3.x版本可以通过 vue create 命令快速创建一个新项目的脚手架，不需要像vue2.x那样借助于webpack来构建项目。
Vue脚手架搭建以及创建Vue项目流程
热门推荐
weixin_68658847的博客
04-25 3万+
Vue脚手架的创建以及用脚手架创建项目的全套流程
vue-cli3-template：基于Vue-cli3建造的脚手架项目模板
01-31
项目介绍 基于Vue-cli3建造的前端开发脚手架项目模板，主要包括以下内容：Webpack4.x性能调优配置，Vue.js全家桶，移动端vw适应，单元测试等功能，可以参考，欢迎大家围观指教！ 项目特点 特征 巴别塔 VueRouter 威克斯 CSS预编译工具：更少 HTTP库：Axios 代码规范：eslint airbnb规范 业务代码和第三方库区分打包：DllPlugin 删除冗余代码：UglifyJsPlugin 开启Gizp压缩：compression-webpack-plugin 配置约会公共样式文件 使用别名简化路径 vw移动端适应 文件结构可视化：webpack-bundle-analyzer 安装及快速开始 # 克隆项目 $ git clone https://github.com/liangfengbo/vue-cli3-template # 进入目录 $ cd vue-cli3-template # 安装依赖包 $ yarn install # 启动项目 $ yarn serve # eslint 检测 $ yarn lint # eslint 修复
vue-cli 脚手架总结
akya8707的博客
07-18 191
> vue-cli 的脚手架项目模板有browserify 和 webpack , 现在自己在用的是webpack , 官网给出了两个模板： webpack-simple 和 webpack 两种。两种的区别在于webpack-simple 没有包括Eslint 检查功能等等功能，普通项目基本用webpack-simple 就足够了. 搭建官方项目模板步骤： 　　1、n...
vue脚手架
weixin_45904557的博客
07-25 695
VueCLI是一个基于Vue.js进行快速开发的完整系统通过@vue/cli搭建交互式的项目脚手架。
创建Vue脚手架，用的webpack模板
叁拾博客
08-17 325
创建Vue脚手架一、下Vue模板项目 一、下Vue模板项目 （我使用的工具是webstrom） vue-cli 是 vue 官方提供的脚手架工具 github: https://github.com/vuejs/vue-cli 作用: 从 https://github.com/vuejs-templates 下载模板项目 4.文件框中输入cmd命令，打开cmd窗口 5.在命令窗口输入npm install -g vue-cli命令，脚手架全局安装。 6.安装好输入vue检查，安装成功效果如下
vue--Vue脚手架框架搭建项目
鑫709的博客
05-05 1146
前提：搭建好NodeJS环境 创建Vue项目前准备 验证安装是否成功 1、安装node.js和npm 按键win+r,输入前提：搭建好NodeJS环境打开命令行工具 ​ 出现以上版本显示，代表安装成功 2、安装webpack 安装webpack，按键wind+r再输入cmd点击enter键 打开命令行工具输入：npm install webpack -g，安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。 ​ 在此目录下有生成webpack
vue脚手架搭建过程图解
08-27
至此，Vue脚手架搭建已完成。Vue CLI会自动配置Webpack，提供热重载、源码映射等功能，极大地提高了开发效率。随着项目的进行，你可以添加更多的Vue插件和库，通过Vue CLI的`vue add`命令，例如添加Vuex状态管理或...
vue脚手架搭建项目及vue学习
06-06
在"vue脚手架搭建项目及vue学习"的主题中，我们将深入探讨如何使用Vue CLI（命令行接口）来初始化一个项目，以及Vue的核心概念和关键特性。 1. **Vue CLI的使用**： Vue CLI是一个官方提供的强大脚手架工具，用于...
Vue脚手架搭建以及创建Vue项目流程_脚手架创建vue项目
2401_89609610的博客
01-14 1501
node_cache和node_global是后面创建的文件夹，后面有讲到，创建的位置，我在这里放到了node.js文件夹下，也可以自定义文件夹路径四个path分别代表：添加了NODE_PATH这个变量名，添加这个名下面的两个文件夹等，最后那个路径也要配一下，不然安装淘宝镜像会有问题效果：提示：如果碰到下面情况可能原因：可能是C:\Users\Administrator(users)目录下的.npmrc里的配置问题,把里面的文件改成自己需要的路径，比如我想放到node.js文件夹下。
vue-template-pc:vue脚手架-模板
04-28
vue-template-pc vue脚手架-模板 启动方式: 将项目拉到本地,安装依赖(npm i); 建议装上yarn 和 nrm 开发环境启动项目 npm run dev 项目打包 npm run build 项目指令化创建页面 npm run create-page 详细脚本代码 /template/script.js 和/template/util.js 2020/1/8 防抖 | 节流 指令和函数 和使用参考 2020/1/10 axios二次封装 和 webpack-dev-server配置proxy实现开发模式下的本地代理(可解决跨域问题) 2020/1/11 vuex简单配置和使用 vuex的模块的使用 2020/1/16 补充时间格式化函数和千位打点工具函数 2020/1/17 优化按钮防抖函数和节流函数 防抖函数是首部触发还是尾部触发,根据常规交互逻辑,默认置为
vue脚手架基础demo
红目香薰
09-18 985
vue脚手架基础demo :” 是指令 “v-bind”的缩写。parseInt格式化整数类型。图片会每2.5秒更换一张。
Vue学习（三）—— vue脚手架
weixin_44916936的博客
03-31 2069
文章目录第三部分 使用vue脚手架一、介绍及安装1.概述2.安装步骤3.备注4.模板项目结构5.关键代码5.1 index.html5.2 main.js5.3 App.vue5.4 components/School.vue二、关于不同版本的Vue三、修改默认配置1.无法修改2.可配置项2.1 配置参考2.2 配置文件四、ref属性五、**props**1.功能2.传递数据3.接收数据4.示例代码4.1 Student.vue4.2 App.vue5.修改注意六、混入（mixin）1.功能2.使用方式：3
【Vue】脚手架搭建
z914020826的博客
11-03 2214
简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，V8 引擎执行 Javascript 的速度非常快，性能非常好。
vue脚手架搭建、介绍和初始页面的构造（图文详细）
m0_56369204的博客
06-28 5160
如何解决繁琐的项目初始化过程，快速搭建一个Vue项目，而不必担心复杂的配置和设置？Vue脚手架Vue Scaffold（Vue CLI）将实现这个功能，本文将带你入门Vue脚手架，熟悉项目结构和基本配置。
vue-cli3 脚手架搭建h5基础模板框架
Web_boom的博客
06-24 2909
1.通过脚手架工具创建基本的vue项目 ------使用命令 vue create 项目名称(不可使用驼峰式命名，包含大写字母的)2.选择创建的模板 default是脚手架一个默认的模板，里面只带的有babel和eslint 两种插件选项 Manually是一个自定义模板可以自行选择添加的插件进行创建脚手架的模板 这里选择第二个，进入自定义插件创建脚手架（自己选择进行添加所需的插件） 3.上图，使用空格自定义选择需要添加的插件，选择完成后回车进入下一步，这里我选择在加上路由（Router） Vuex ,c
Vue 脚手架
Errol's Blog
03-30 8644
Vue 脚手架
Vue 脚手架(vue-cli) 环境搭建
weixin_61562639的博客
08-11 2997
vue 脚手架指的是 vue-cli 它是 vue 官方提供的一个快速构建单页面（SPA）环境配置的工具，cli 就是(command-line-interface ) 命令行界面。webpack 的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用。a. 将安装包放在 ./node_modules 下（运行 npm 命令时所在的目录），如果没有 node_modules 目录，会在当前执行 npm 命令的目录下生成 node_modules 目录。...
Vue-CLI3-自定义脚手架模板
weixin_34018169的博客
06-13 1116
自定义脚手架模板 创建脚手架项目 使用哪个选哪个 选择常用的 选择基本配置 添加插件 # vue add vuetify 复制代码打开创建新的脚手架项目的图形界面 # vue ui 复制代码 转载于:https://juejin.im/post/5c8f0b8e6fb9a070e344a5a9...
vue脚手架搭建
最新发布
03-28
### Vue CLI 项目初始化与配置 Vue CLI 是一个官方提供的脚手架工具，用于快速构建基于 Vue.js 的开发环境。它提供了丰富的插件和预设功能来帮助开发者高效地创建现代前端应用。 #### 安装 Vue CLI 要使用 Vue CLI 创建项目，首先需要安装 Vue CLI 工具。可以通过 npm 或 yarn 来全局安装 Vue CLI： ```bash npm install -g @vue/cli ``` 或者通过 Yarn 进行安装： ```bash yarn global add @vue/cli ``` 确认安装成功可以运行以下命令查看版本号[^1]： ```bash vue --version ``` #### 初始化 Vue 项目 安装完成后，可以使用 `vue create` 命令来初始化一个新的 Vue 项目。执行如下命令： ```bash vue create my-project-name ``` 这会启动交互式的向导界面，允许选择不同的特性（如 TypeScript、Router、Vuex 等），并自定义项目的配置文件[^2]。 如果希望跳过手动配置过程，可以直接指定默认设置： ```bash vue create --default my-project-name ``` #### 配置 Vue CLI 项目 在项目创建完毕后，进入项目目录并通过编辑 `vue.config.js` 文件来自定义 Webpack 和其他构建选项。如果没有该文件，则可以在根目录下新建一个名为 `vue.config.js` 的文件。以下是常见的配置项示例： ```javascript module.exports = { publicPath: './', // 设置静态资源路径 outputDir: 'dist', // 构建输出目录名称 lintOnSave: false, // 是否开启 ESLint 检查 devServer: { // 开发服务器配置 port: 8080, open: true // 自动打开浏览器窗口 } }; ``` 完成上述操作之后，在终端输入以下指令即可启动本地服务进行调试[^3]: ```bash npm run serve ``` #### 使用 Vue UI 图形化管理工具 除了命令行方式外，还可以利用图形化的 Vue UI 工具来进行更直观的操作。只需简单运行下面这条语句就可以启动 GUI 接口页面： ```bash vue ui ``` 此方法适合初学者以及那些偏好视觉辅助的人群[^4]。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值