Vue:Vue2.0搭建脚手架

随着Vue.js越来越火爆,更多的项目都用到Vue进行开发,在实际的开发项目中如何搭建脚手架呢?今天就来跟大家分享一下如何使用vue-cli搭建脚手架。

一、安装node.js

1、进入官网https://nodejs.org/en/download/

根据电脑操作系统,选择相应版本的文件进行下载。

2、下载文件后双击进行安装

安装完成以后进入node.js的安装目录:D:\Program Files\nodejs\(这里是我本机安装的目录,其他机器目录可能不同),你会发现里面自带了npm,直接用npm安装环境即可。

二、安装cnpm

  1. 说明:npm(node package manager)是node.js的包管理器,用于node插件管理(包括安装、卸载、管理依赖等)。
  2. 使用npm安装插件:命令提示符执行 npm install <name>。
  3. 选装cnpm。因为npm安装插件是从国外服务器下载,受网络影响大,可能会出现异常,如果npm的服务器在中国就好了,于是我们乐于分享的淘宝团队干了这事。来自官网:“这事一个完整npmjs.org镜像,你可以用此代替官方版本(只读),同步频率目前为10分钟一次,尽量保证与官方服务同步。”;  
  4. 安装命令:npm install -g cnpm --registry=https://registry.npm.taobao.org。
  5. 查看版本:输入cnpm-v,可以查看当前cnpm的版本。

注意:安装cnpm的时候不是安装在node.js安装的地方,要在创建的项目目录下面安装。

三、安装vue-cli脚手架构建工具

vue-cli提供了一个官方命令行工具,可以用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生成环境的构建配置的项目。

1、安装命令

命令:$ cnpm install vue-cli -g。如下图所示:

注意:g表示全局安装。

出现如下的界面表示安装完成:

2、检查是否安装成功

安装完成之后输入 vue -V(注意这里是大写的"V"),如下图所示,如果出现相应的版本号,则说明安装成功。

四、创建一个基于webpack模板的新项目

要创建项目,首先我们要选定目录,然后在命令行中把目录转到选定的目录。可以使用下面的命令:

$ vue init webpack my-app

注意:my-app为自定义的项目名称,自定义的项目名称中不能包含大写字母。

输入命令以后直接按回车执行:

运行初始化命令的时候会让用户输入几个基本的选项,如项目名称、描述、作者等信息。例如:

Project name (myvuedemo) :项目名称,这里是myvuedemo。

Project description (A Vue.js project):项目描述,这里是“我的第一个Vue项目”。

Author:作者。

Install vue-router? (Y/N):是否安装Vue路由,也就是以后是spa(但页面应该需要的模块)。

Use ESLint to lint your code?(Y/N):使用ESLint到你的代码。

Pick an ESLint preset (Use arrow keys):选择一个预置ESLint(使用箭头键)。

Set up unit tests (Y/n) y:设置单元测试。

Setup e2e tests with Nightwatch? (Y/n) :设置端到端测试。

五、运行项目

输入下面的命令:$ cnpm run dev。

运行成功以后,根据提示,在浏览器中输入http://localhost:8080,浏览器显示的页面如下:

注意:服务启动以后,就不能关闭了

到此为止,Vue.js的脚手架搭建完成。

原文地址:https://www.cnblogs.com/dotnet261010/p/10140960.html

时间: 2024-10-16 01:22:46

Vue:Vue2.0搭建脚手架的相关文章

Vue2.0搭建Vue脚手架(vue-cli)

一.安装node.js 进入官网下载node.js 二.安装 cnpm 1.说明:npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装.卸载.管理依赖等): 2.使用npm安装插件:命令提示符执行npm install <name> 3.选装 cnpm  因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常. 安装:npm install -g cnpm --registry=https://registry.npm.taoba

VUE系列一:VUE入门:搭建脚手架CLI(新建自己的一个VUE项目)

一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分钟的时间就可以运行起来并带有热重载.保存时 lint 校验,以及生产环境可用的构建版本.更多详情可查阅 Vue CLI 的文档. 个人理解:在实际开发中都是通过脚手架快速搭建一个vue项目,当然也可以使用CDN的方式(具体请看官网) 使用脚手架的好处: 1. 脚手架是通过webpack搭建的开发环境

vue 项目结构搭建 脚手架的搭建 Vue-cil

vue-cil :vue脚手架:提供基本项目结构 本身集成了很多项目模板: webpack: webpack-simple: mac 安装 前提示安装好node 1.输入 sudo npm install -g vue-cli 这个命令: 2.输入 vue 3.输入 vue init webpack-simple vue_demo 4进入cd vue_demo 5 安装 npm install p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0p

Vue.js系列之项目搭建(vue2.0 + vue-cli + webpack )

1.安装node node.js环境(npm包管理器) cnpm npm的淘宝镜像 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装).安装完成之后,打开命令行工具,输入 node -v,如果出现相应的版本号,则说明安装成功. npm包管理器,是集成在node中的,所以,直接输入 npm -v就会显示出npm的版本信息. 2.安装cnpm 在命令行中输入 npm install -g cnpm --registry=http://registr

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

系列教程一目录:.netcore+vue 前后端分离 系列教程二目录:DDD领域驱动设计 系列教程三目录:Nuxt.js TiBug系统 系列教程四目录:VueAdmin 后台管理系统 系列教程五目录:IdentityServer4 授权服务器 本文梯子 缘起 零.今天要完成左下角红色的部分 A.Vue 常见的IDE —— 我是开发工具,干活的都是我 1.VsCode 2.Webstorm 3.Atom B.安装Nodejs环境 —— 我是运行环境,没我不行 C.安装 npm / cnpm ——

Vue2.0新手入坑环境搭建(一)

每周不定期更新  专业团队接APP 外包 联系QQ1129580542 vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli 一. 安装 node.js 首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包. 只是这样安装的 node 是固定版本的,如果需要多版本的 node,可以使用 nvm 安装http://blog.

Vue2.0 新手完全填坑攻略——从环境搭建到发布

本文作者 Jinkey(微信公众号 jinkey-love,官网 https://jinkey.ai) 原文链接 https://jinkey.ai/post/tech/vue2.0-xin-shou-wan-quan-tian-keng-gong-lue-cong-huan-jing-da-jian-dao-fa-bu 文章允许非篡改署名转载,删除或修改本段版权信息转载的,视为侵犯知识产权,我们保留追求您法律责任的权利,特此声明! 感谢 showonne.yubang 技术指导 Demo 地址

vue2.0新手环境搭建

#vue2.0新手环境搭建 1. 安装node.js(稳定版本,>4.0.0即可)2. 获取nodejs模块安装目录访问权限(windows跳过此步)sudo chmod -R 777 /usr/local/lib/node_moudules ``` sudo chmod -R 777 /usr/local/lib/node_moudules ```3. 安装淘宝镜像 ``` npm install -g cnpm ```4. 安装webpack ``` cnpm install webpack

Vue2.0总结———vue使用过程常见的一些问题

Vue目前的的开发模式主要有两种: 1.直接页面级的开发,script直接引入Vue 2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了 webpack可以进行配置,配置多文件入口,进行多页面开发 第二种Vue开发,结合webpack打包完文件会很大,怎么解决这个问题? 1.webpack代码拆分:code-spliting 2.提取公共(如提取css,js) 3.预渲染:使用prerender-spa-plugin插件 4.后台----开启压