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是运行在服务端的JavaScript,举例说明:

我们新建JavaScript文件,里边输入内容

console.log("Hello World")

安装完成环境之后打开终端,键入Node进入命令交互模式,输入 node HelloWorld.js,可以看到之前在浏览器控制台可以看到的内容

2.下载安装

https://nodejs.org/en/download/点击下载安装,vue-cli要求Node的版本8及更高

二、npm

npm(Node  package Manager)在刚刚上一步中,npm是随NodeJS一起安装的包管理工具,能解决Node.js代码部署上的很多问题,它已经成了Node.js的标准发布平台,用于Node.js包的发布、传播、依赖控制。npm提供了命令行工具,使你可以方便的下载、安装、升级删除包、也可以作为开发者发布并维护包, npm的背后,是基于couchdb的一个数据库,详细记录了每个包的信息,包括作者、版本、依赖。Node.js使用npm,就像python使用pip

当我们安装Node.js之后npm也会随之安装

查看是否安装成功,node附带的npm可能不是最新版本的,使用以下命令,更新至最新版本

npm install npm -g

三、cnpm

cnpm(China Node package Manager   http://npm.taobao.org/)前面安装完node之后自带了npm,允许用户从NPM服务器下载别人编写的第三方包到本地使用,允许用户从NPM服务器服务器下载并安装别人编写的命令行程序到本地使用,允许将自己编写的包或命令行程序上传到NPM服务器供别人使用。

cnpm是中国淘宝团队做的国内镜像,因为npm的服务器位于  国外可能会影响安装。淘宝镜像与  官方同步频率目前为10分钟一次保证与官方同步。cnpm的仓库只是一个官方仓库的拷贝,它不承担publish工作,所以使用cnpm publish 操作时会出错。

可以查看npm的仓库地址

npm config get registry

可以看到是官方的地址,下面我们安装淘宝镜像的地址:

npm install cnpm -g --registry=https://registry.npm.taobao.org

可以通过cnpm -v 来查看是否安装成功

四、cnpm安装vue-cli

1.vue-cli4

cmd执行命令

cnpm install -g @vue/cli

使用vue -V查看是否安装成功(大写字母V)

然后开始创建项目执行命令:

vue create project-name

一直默认即可,

npm run serve

打开浏览器进入http://localhost:8080

2.vue-cli2

上面我们安装的是最新版的vue项目,最初使用时vue-cli2,

安装webpack

cnpm install webpack -g

安装vue-cli2

cnpm install vue-cli -g

使用vue-init命令来初始化项目

vue  init <template-name>  <project-name>

<template-name>:表示模板名称,vue-cli官方为我们提供了5种模板:
webpack-一个全面的webpack+vue-loader的模板,功能包括热加载,linting,检测和CSS扩展。
webpack-simple-一个简单webpack+vue-loader的模板,不包含其他功能,让你快速的搭建vue的开发环境。
browserify-一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。
browserify-simple-一个简单Browserify+vueify的模板,不包含其他功能,让你快速的搭建vue的开发环境。
simple-一个最简单的单页应用模板。

<project-name>:表示项目名称,这个你可以根据自己的项目来起名字。(不支持大写字母)

我们一般会使用webpack这个模板,执行如下命令:

vue init webpack demo2

这时候会出现几个对项目的配置与描述

‘Project name :项目名称 ,如果不需要更改直接回车就可以了。注意:这里不能使用大写

Project description:项目描述,默认为A Vue.js project,直接回车,不用编写。

Author:作者,如果你有配置git的作者,他会读取。

Install vue-router? 是否安装vue的路由插件,我们这里需要安装,所以选择y
Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n,如果你是大型团队开发,最好是进行配置。
setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha,我们这里不需要,所以输入n。
Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试,我们这里不需要,所以输入n。

启动方式可能和第一种稍有不同

npm  run dev

原文地址:https://www.cnblogs.com/LiuFqiang/p/11991468.html

时间: 2024-10-30 10:11:11

vue搭建vue-cli脚手架项目的相关文章

vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。

废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子 项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.env.js 我们需要做配置的就是第一个和第三个. 其实这两个文件内容就是针对生产环境和发布环境设置不同的参数的文件,那么打开dev.en.js,开发环境.原本代码如下: 'use strict' const merge = require('webpack-merge') const prodEnv

vue搭建环境并创建项目

1.>npm install @vue/cli -g 2.创建项目A a.>vue ui b.在弹出的管理界面创建项目 或 a.npm install -g @vue/cli-init b.vue init webpack myapp //myapp:项目名称 visual code中添加辅助插件: js-css-html formatter html css support debugger for chrome auto close tag vetur 原文地址:https://www.c

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 脚手架搭建单页面 Vue 应用(进阶2)

1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 6.10.3 的版本,相对稳定. 2.使用 npm 管理依赖 使用 node 自带的包管理工具 npm 管理项目中的依赖,由于 npm 的服务器在国外.经常会遇到速度奇慢或者下载不下来依赖的情况,所以推荐使用淘宝镜像. npm install-g cnpm--registry=https://reg

ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目

 一.前言 这几年前端的发展速度就像坐上了火箭,各种的框架一个接一个的出现,需要学习的东西越来越多,分工也越来越细,作为一个 .NET Web 程序猿,多了解了解行业的发展,让自己扩展出新的技能树,对自己的职业发展还是很有帮助的.毕竟,现在都快到9102年了,如果你还是只会 Web Form,或许还是能找到很多的工作机会,可是,这真的不再适应未来的发展了.如果你准备继续在 .NET 平台下进行开发,适时开始拥抱开源,拥抱 ASP.NET Core,即使,现在工作中可能用不到. 雪崩发生时,没有一

Vue 搭建项目

Vue  搭建项目 一.node下载安装: 1.下载:https://nodejs.org/en/download/ 2.安装默认许选择,下一步就行: 3.安装完之后就可以使用npm命令 二.npm 安装cnpm: 命令: npm install -g cnpm --registry=https://registry.npm.taobao.org安装完之后就可以使用cnpm和npm命令一样,只是cnpm是淘宝镜像而已 三.npm 通过webpack方式安装vue: 命令: 1.npm insta

vue.js在windows本地下搭建环境和创建项目

Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. 首先vue.js的作者是中国人,所以说他是国产的,吸收了google的angular.js和facebook的react.js的特性,摒弃了jquery传统的DOM操作,采用数据绑定和指令等概念,可以说是未来WEB端开发的

基于 vue 全家桶的 spa 项目脚手架

项目简介 Github: https://github.com/hanan198501/vue-spa-template 我们基于 vue-cli 脚手架生成项目模板做了一些改造,加入了 vue-router ,vuex 等配套设施,本地 dev server 中加入了接口 mock 功能,还增加一个 build server 来预览 build 结果页面,前后端通过 spa 的方式实现分离,并相应做了分离后的联调,部署方案.通过这个项目模板,可以快速搭建起用于前后端分离后的单页应用开发环境,项

使用vue-cli搭建vue项目的初始化

在项目中使用vue我使用vue-cli脚手架搭建项目 1.先安装nodejs 2.使用npm install -g vue-cli (建议在使用这步前先安装nrm来切换npm的源利器,使得下载资源更快速 npm install -g nrm nrm ls(即可查看npm 的源利器有哪些) nrm use (切换npm的源利器) 然后就可以使用npm install 你需要下载的包 ) 3.vue --version 4. vue init webpack myproject( vue init