vue全家桶项目构建教程

步骤一、安装vue-cli

首先,我们可以通过npm安装vue-clic,前提是我们需要有node环境,如果电脑还没安装node,先安装,可通过 node -v

查询node的版本号,有版本号则已经安装成功;

node下载https://nodejs.org/en/地址

接下来,我们需要确保电脑已经安装了webpack,webpack是一个包管理工具,也是vue-cli的构建工具,安装也很简单,全局安装只需要执行

npm install webpack -g

紧接着,开始我们vue-cli的安装

npm install --global vue-cli

完成后输入 vue -V查看是否安装成功,V大写

步骤二、构建项目

新建一个文件夹作为项目存放地,然后使用命令行cd进入到项目目录输入

vue init webpack projectName

输入命令后,会跳出几个选项让你回答:n

  • Project name (projectname): -----项目名称,直接回车,按照括号中默认名字(注意这里的名字不能有大写字母,如果有会报错Sorry, name can no longer contain capital letters),阮一峰老师博客为什么文件名要小写 ,可以参考一下。
  • Project description (A Vue.js project): ----项目描述,也可直接点击回车,使用默认名字
  • Author (): ----作者
    接下来会让用户选择:
  • Runtime + Compiler: recommended for most users 运行加编译,既然已经说了推荐,就选它了
    Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时,已经有推荐了就选择第一个了
  • Install vue-router? (Y/n) 是否安装vue-router,这是官方的路由,大多数情况下都使用,这里就输入“y”后回车即可。
  • Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码,ESLint是个代码风格管理工具,是用来统一代码风格的,一般项目中都会使用。
    接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设,编写vue项目时的代码风格,直接y回车
  • Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试,我选择安装y回车
  • Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 ,我选择安装y回车

回答完毕后上图就开始构建项目了。

配置完成后,可以看到目录下多出了一个项目文件夹projectname,然后cd进入这个文件夹:
安装依赖:

npm install

安装完成后的目录

启动项目

npm run dev

启动完成界面

这个时候,我们可以打开浏览器,输入http://localhost:8080/,可看到如下界面,说明我们的项目脚手架已经初始化完成;

vue-cli脚手架webpack配置文件详解 https://segmentfault.com/a/1190000014804826/

打包上线

npm run build

打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看。
项目上线时,只需要将 dist 文件夹放到服务器就行了。

npm开启了npm run dev以后怎么退出关闭? ctrl+c

原文地址:https://www.cnblogs.com/ielse/p/11347707.html

时间: 2024-11-10 04:53:26

vue全家桶项目构建教程的相关文章

已配置好的vue全家桶项目router,vuex,api,axios,vue-ls,async

github 地址: https://github.com/liangfengbo/vue-cli-project 点击进入 vue-cli-project 已构建配置好的vuejs全家桶项目,统一管理后端接口 | 获取数据 | 请求数据,已包含vue-router,vuex,api,axios. webpack, 储存用vue-ls, 异步async/await, css less. 下载即使用项目开发. 喜欢或对你有帮助的话请点star??,Thanks. A Vue.js project

项目- Vue全家桶实战去哪网App

最近在学习Vue,花了几天时间跟着做了这个项目,算是对学习Vue入门的一个总结,欢迎同学们star 去哪网APP ?? 项目演示地址:http://118.25.39.84 基于 Vue 全家桶 (2.x) 制作的 去哪网APP项目,项目完整.功能完备.UI美观.交互一流. 点击查看效果 技术栈 [前端] Vue:构建用户界面的 MVVM 框架,核心是响应的数据绑定和组系统件 vue-router:为单页面应用提供的路由系统,项目上线前使用了路由懒加载技术,来异步加载路由优化性能 vuex:Vu

开发微信全家桶项目 Vue Node MongoDB高级技术栈全覆盖

开发微信全家桶项目 Vue Node MongoDB高级技术栈全覆盖链接:https://pan.baidu.com/s/15-9Ne3vFEFPzJA0wyltxrg 提取码:加Q:1642261812 V信:SH66668888QH 获取 第1章 本地与服务器环境准备介绍微信公众号/小程序/域名/服务器的申请选购流程,在本地与线上服务器分别对项目的运行环境进行搭建部署,如 Node.js/Vue/Yarn/PM2/Nginx/MongoDB 等等,同时会来简单介绍下从本地通过 PM2 利用

【实战】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 目

Vue全家桶高仿小米商城

大家好,我是河畔一角,时隔半年再次给大家带来一门重量级的实战课程:<Vue全家桶高仿小米商城>,现在很多公司都在参与到商城的构建体系当中,因此掌握一套商城的标准开发体系非常重要:商城的开始时非常复杂的,包括众多的页面设计和交互,以及非常丰富的知识点,所以一旦学会商城开发,其它系统完全不在话下. 下面给大家介绍一下小米商城包含的知识点和内容: 商城的页面流程: 商城组件部分: NavHeader(导航头组件).NavFooter(导航底部组件).ServiceBar(服务条组件).Product

从零开始系列之vue全家桶(3)安装使用vuex

什么是vuex? vuex:Vue提供的状态管理工具,用于同一管理我们项目中各种数据的交互和重用,存储我们需要用到数据对象. 即data中属性同时有一个或几个组件同时使用,就是data中共用的属性. 中大型单页应用必备. 小型单页应用完全可以不用. 安装: 1.cd 项目  (如cd my-vue)后,输入 cnpm install vuex --save 2.在src下新建一个名叫store的文件夹,与App.vue同级,并在文件夹下新建store.js文件.因为store.js是基于vue的

前端工程师晋升课程 Vue全家桶+SSR+Koa2全栈开发美团网

第1章 课程导学这门课主讲以Vue SSR+Koa2全栈技术为目标,最终实现美团网项目.本章节旨在告诉大家我们会用到哪些技能.教学方法.课程内容分布.学习方法等.备注:我们会涉及Vue2.5.Nuxt.Koa2.element-ui.Mongodb等 1-1 课程导学第2章 Vue基础知识整个SSR部分都是用的Vue框架,需要给初级用户讲解Vue的基础语法,不会让他们在学习实战的时候感到迷茫,这个章节会通过vue-cli搭建一个简单的demo,让大家快速的掌握Vue的基础应用,即使他没有学习过.

Vue全家桶实战 从零独立开发企业级电商系统

Vue全家桶实战 从零独立开发企业级电商系统(免费升级Vue3.0)现阶段,电商系统随处可见,具有很大市场潜力:同时因为商城系统复杂,涉及到丰富的知识点,如果能进行电商系统的开发,其它各类型的前端系统也能掌握.本课程以Vue全家桶作为主要的技术体系,模拟小米商城,带大家从0开始开发网页和交互功能.你能进行完整的项目架构.体会页面开发的全流程.学习丰富的技术栈和各类组件知识,还能了解Git.动画.开发调试等方面的知识.同时项目本身具有很强的实用性,稍作修改,便能"为我所用".相信此课程能

vue全家桶和react全家桶

vue全家桶:vue  +  vuex (状态管理)  + vue-router (路由) + vue-resource +axios +elementui react全家桶 : react + redux(状态管理) +react-router(路由) + axios + antd || antd-model 原文地址:https://www.cnblogs.com/aibabel/p/11827851.html