一安装node.js

1、Node.js简介
简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。
2、下载Node.js
打开官网下载链接:https://nodejs.org/en/download/ 我这里下载的是node-v6.9.2-x64.msi,如下图：

开始安装

1、下载完成后，双击“node-v6.9.2-x64.msi”，开始安装Node.js

点击【Next】按钮

勾选复选框，点击【Next】按钮

修改好目录后，点击【Next】按钮

安装完后点击【Finish】按钮完成安装

至此Node.js已经安装完成，可以先进行下简单的测试安装是否成功了，后面还要进行环境配置
在键盘按下【win+R】键，输入cmd，然后回车，打开cmd窗口

安装完后的目录如下图所示:

此处说明下：新版的Node.js已自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西

环境配置

说明：这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。
例如：我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在我安装的文件夹【D:\Develop\nodejs】下创建两个文件夹【node_global】及【node_cache】如下图：

创建完两个空文件夹之后，打开cmd命令窗口，输入

npm config set prefix"D:\Develop\nodejs\node_global"

npm config set cache "D:\Develop\nodejs\node_cache"

接下来设置环境变量，关闭cmd窗口，“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”

进入环境变量对话框，在【系统变量】下新建【NODE_PATH】，输入【D:\Develop\nodejs\node_global\node_modules】，将【用户变量】下的【Path】修改为【D:\Develop\nodejs\node_global】

测试

配置完后，安装个module测试下，我们就安装最常用的express模块，打开cmd窗口，
输入如下命令进行模块的全局安装：

npm install express -g # -g是全局安装的意思

安装cnpm（npm为国外镜像，速度可能会很慢）

    由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，
所以还需要npm的国内镜像—cnpm。在命令行中输入 npm install -g cnpm –registry=http://registry.npm.taobao.org 。

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

    在命令行中运行命令 npm install -g vue-cli ，然后等待安装完成。

三用vue-cli构建项目

    在你的workspace中进入命令行。(不建议在桌面，建议在workspace中)
在命令行中运行命令 vue init webpack firstVue 。解释一下这个命令，这个命令的意思是初始化一个项目其中webpack是构建工具，也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中，如下图：

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

列表如下
(1)? Project name (VueTest002)：项目名称name can no longer contain capital letters（不能大写）
(2)? Project description (A Vue.js project) vue-cli新建项目(项目描述)；
(3)? Author (xhdx <zhuming3834@sina.com>) ；zhuming3834@sina.com(项目作者)；
(4)? Vue build
❯ Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY
allowed in .vue files - render functions are required elsewhere
这里选择Runtime + Compiler: recommended for most users；
(5)? Install vue-router? (Y/n) y 是否使用vue-router，这里根据需求选择；
(6)? Use ESLint to lint your code? (Y/n) y 是否使用ESLint，这里根据需求选择；
(7)? Pick an ESLint preset (Use arrow keys)
❯ Standard (https://github.com/feross/standard)
Airbnb (https://github.com/airbnb/javascript) none (configure it yourself)
这里选择    Standard(https://github.com/feross/standard)
(8)? Setup unit tests with Karma + Mocha? (Y/n) n 是否需要单元测试，这里根据需求选择；
(9)Setup e2e tests with Nightwatch? (Y/n) n是否需要单元测试，这里根据需求选择；
(10) Should we run `npm install` for you after the project has been created?
(recommended) (Use arrow keys)
创建项目后需要需要安装项目所需要的依赖，这里选择no，本步骤作为步骤6说明

四安装依赖

使用npm安装依赖

安装依赖包，首先cd到项目文件夹（firstVue文件夹），然后运行命令 cnpm install ，等待安装安装完成之后，会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹，这里边就是我们项目需要的依赖包资源

使用yarn安装依赖

//安装yarn
npm install -g yarn
//切换镜像
yarn config set registry https://registry.npm.taobao.org
//查看yarn配置
yarn config list
//安装依赖
yarn//yarn常用命令
npm init === yarn initnpm install === yarn 或者 yarn installnpm install taco --save === yarn add taconpm uninstall taco --save === yarn remove taconpm install taco --save-dev === yarn add taco --devnpm update --save === yarn upgradenpm install taco@latest --save === yarn add taconpm install taco --global === yarn global add taconpm init --yes/-y === yarn init --yes/-ynpm link === yarn linknpm outdated === yarn outdatednpm publish === yarn publishnpm run === yarn runnpm cache clean === yarn cache cleannpm login === yarn loginnpm test === yarn test

五运行项目

    安装完依赖包之后，就可以运行整个项目了。在项目目录中，运行命令 npm run dev （或 yarn run dev），会用热加载的方式运行我们的应用，热加载可以让我们在修改完
代码后不用手动刷新浏览器就能实时看到修改后的效果。这里简单介绍下 npm run dev 命令，其中的“run”对应的是package.json文件中，scripts字段中的dev，
也就是 node build/dev-server.js命令的一个快捷方式。

会出现以下提示，按提示进行后，在执行 npm run dev

项目运行成功后，浏览器会自动打开localhost:8080（如果浏览器没有自动打开，可以手动输入）。运行成功后，会看到如下所示的界面。

五集成element

1、在cmd命令行进入到项目根目录输入cnpm i element-ui -S
2、安装完成之后，package.json文件会增加element-ui依赖

六创建vue

执行 vue create app

根据提示执行

cd appyarn serve

浏览器输入local地址

注：vue create、vue webpack init 创建vue项目产生的项目文件区别说明

1.用法：vue init webpack app
2.产生目录及说明
build及config：webpack配置相关
src：项目源码
static：存放静态资源
.babelrc：babel相关配置（因为我们的代码大多都是    ES6，而大多浏览器是不支持ES6的，所以我们需要babel帮我们转换成ES5语法）
.editorconfig：编辑器的配置，可以在这里修改编码、缩进等
.eslintignore：设置忽略语法检查的目录文件
.eslintrc.js：eslint的配置文件
.gitignore：git忽略里面设定的这些文件的提交
index.html：入口html文件
package.json：项目的配置文件，用于描述一个项目，包括我们init时的设置、开发环境、生成环境的依赖插件及版本等。
package-lock.json：普通package.json文件“^2.0”这样写的，意味着版本可以大于等于2.0，如此就会出现各种错误。

    1.使用vue create图形化界面创建2.产生目录及说明node_modules:通过npm install安装的依赖代码库public:部署到生产环境的目录src:源码.gitignore：git忽略里面设定的这些文件的提交babel.config.js:babel转码配置package.json：项目的配置文件，用于描述一个项目，包括我们init时的设置、开发环境、生成环境的依赖插件及版本等。

至此结束，欢迎大家的阅览

搭建vue脚手架全教程相关推荐

初学者搭建Vue脚手架工程
初学者搭建Vue脚手架工程 1.在前端的知识海洋里,各种前端框架自动化测试满天飞,正如在当下想不被淘汰,那只有不断的去学习心得知识,所以就有了今天的一次学习vue搭建脚手架的记录. 2.第一步:搭建v ...
Vue 入门之搭建vue脚手架
系列文章目录第一章 Vue 入门之搭建vue脚手架第二章 Vue入门之项目结构介绍第三章 Vue入门之基本语法第四章 Vue入门之企业站点开发实践第五章 Vue入门之前端部署文章目录系列 ...
webpack搭建vue脚手架
之前搞过的webpack版本搭建vue脚手架项目,今天分享一下! 在读这篇文章之前你可能需要了解一些webpack的配置才行否则可能看不懂部分配置首先我们的项目的src目录结构如下基本上与vue ...
搭建Vue脚手架工程
搭建Vue脚手架工程 Vue介绍 Vue是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或 ...
Vue2.0史上最全入坑教程（上）—— 搭建Vue脚手架（vue-cli）
2019独角兽企业重金招聘Python工程师标准>>> ps: 想了解更多vue相关知识请点击VUE学习目录汇总 Vue作为前端三大框架之一截至到目前在github上以收获44,87 ...
Macbook 苹果电脑安装搭建Vue脚手架教程m1芯片Vue脚手架初学
Macbook 苹果电脑安装Vue脚手架教程 1.首先我们进入Node.js的官网,下载安装Node.js 如果你已经安装过可以忽略网址http://nodejs.cn/ 2.直接点击下载,这里我 ...
使用mac搭建vue脚手架项目
1. 需要安装Node.js C:\Users\wheat> node -v v8.9.3 C:\users\wheat> npm -v 2. 安装vue 脚手架用cnpm(使用国内镜 ...
搭建vue脚手架以及 npm ERR! missing script: serve解决方法
目录 vue脚手架搭建 npm ERR! missing script: serve解决方法 vue脚手架搭建前提是安装好vue,可以先输入下面这行代码检查是否安装vue vue --version ...
vue-cli2.x旧版本卸载不掉的问题解决方案（亲测+踩坑）附Vue脚手架安装教程
旧版本卸载问题说明 vue2.x脚手架旧版本卸载不掉的问题:(卸载命令运行后输入vue --version仍一直显示旧版本) 问题解释首先明确一点,卸载不掉肯定说明你的电脑中至少有两个地方存在脚手 ...
搭建vue脚手架_webpack搭建vue脚手架
1.先在本地安装webpack,我是按照教程来的 https://jingyan.baidu.com/article/a65957f43f390524e77f9b4c.html 用命令webpack ...

搭建vue脚手架全教程

一安装node.js

安装cnpm（npm为国外镜像，速度可能会很慢）

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

三用vue-cli构建项目

四安装依赖

五集成element

六创建vue

注：vue create、vue webpack init 创建vue项目产生的项目文件区别说明

至此结束，欢迎大家的阅览

搭建vue脚手架全教程相关推荐

最新文章

热门文章

搭建vue脚手架全教程

一 安装node.js

安装cnpm（npm为国外镜像，速度可能会很慢）

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

三 用vue-cli构建项目

四 安装依赖

五 集成element

六 创建vue

注：vue create、vue webpack init 创建vue项目产生的项目文件区别说明

至此结束，欢迎大家的阅览

搭建vue脚手架全教程相关推荐

最新文章

热门文章

一安装node.js

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

三用vue-cli构建项目

四安装依赖

五集成element

六创建vue