webpack项目模板,vue基础项目设置教程

1.安装npm

 

npm 是node.js 的包管理工科具,
安装流程地址:https://docs.npmjs.com/cli/install 
测度会足够慢,大家得以行使天猫NPM镜像下载安装:https://npm.taobao.org/ 

安装node.js

node.js官网下载并安装node,安装进程非常粗略,一路“下一步”就足以了。

安装到位之后,打开命令行工具,输入 node
-v,如下图,假使出现相应的版本号,则表明安装成功。

图片 1

  1. ##安装npm##  
  2. sudo npm install -g cnpm –registry=https://registry.npm.taobao.org  

安装cnpm

在命令行中输入 npm install -g cnpm
–registry=http://registry.npm.taobao.org 然后守候,安装到位如下图。

图片 2

借使输入cnpm提醒不是卓有作用的通令,则cnpm 安装退步。

万一是Mac OS 系统,需求小心系统权限 最棒在每一句发号施令后面加上 sudo。

 

2.安装vue

设置vue-cli脚手架营造筑工程具

在指令行中运转命令 npm install -g vue-cli ,然后等待安装完毕。

因此上述三部,大家要求忧盛危明的环境和工具都准备好了,接下去就开头采取vue-cli来营造项目。

 

找到八个类型目录,在指令行中运营命令 vue init webpack project-name
。解释一下这么些命令,那个命令的意味是初步化二个项目,在那之中webpack是构建工具,也便是成套项目是依据webpack的。当中project-name是整套项目文件夹的名目,那个文件夹会自动生成在你内定的目录中,如下图。

图片 3

解释一下每一种标题是怎么着意思:

Project name :项目名称

Project description 项目描述

Author 作者

Install vue-router?是还是不是安装vue路由组件,选拔是,因为此项目会用到

Use ESLint to lint your code ? 是不是利用eslint来检查和测试代码风格,否。

Setup unit tests with Karma+Mocha? 是还是不是安装测试,否。

Setup e2e tests with Nightwatch?单元测试?否。

 

 

可共同回车。

 

说一下Mac OS大概会遇上的权力难题 vue init webpack project-name

图片 4

唤醒 没有权力,无法访问。

那儿使用 sudo vue init webpack project-name
提醒输入密码,完结后打响安装。

 

  1. ## 全局安装 vue-cli##  
  2. sudo npm install -g vue-cli  

安装项目所需的注重

要设置信赖包,首先cd到项目文件夹(project-name文件夹),然后运营命令 cnpm
install ,等待安装。

图片 5

 

设置到位。

 

3.创建vue魔板

运文章种

在品种目录中,运维命令 npm run
dev ,会用热加载的章程运转大家的接纳,热加载能够让我们在修改完代码后并非手动刷新浏览器就能实时看到修改后的效用。

那里大致介绍下 npm run
dev 命令,在那之中的“run”对应的是package.json文件中,scripts字段中的dev,也正是 node
build/dev-server.js命令的三个火速方式。

 

图片 6图片 7

 

开拓浏览器输入http://localhost:8080即可看到

 

 

图片 8

 

那是项目标开端化

  1. ## 创设3个基于 “webpack” 模板的新类型  
  2. sudo vue init webpack my-project  
  3.   
  4. ? Project name 项目名  
  5. ? Project description 项目名描述  
  6. ? Author 小编邮箱  
  7. ? Use ESLint to lint your code? 是还是不是必要ESlist语法检查  
  8. ? Setup unit tests with Karma + Mocha? 是还是不是要求单元测试  
  9. ? Setup e2e tests with Nightwatch? Yes是还是不是要求e2e测试  

 

4.安装vue依赖

 

  1. ##下载注重##  
  2. sduo npm install  

5.周转品种

  1. ##运行vue##  
  2. sudo npm run dev