vue项目创建

一.npm安装

1.安装node.js(官方网站:https://nodejs.org/en/)

(1)windows,mac,linux每个系统都有对应的安装包,按照自己的系统分类去下载对应的安装包

(2)安装成功后,进入终端窗口,查看node和npm的版本(node -v 和 npm -v)

(3)如果node不是最新版本,想安装最新版本的话,安装"n"模块,这是专门管理node.js版本的.

npm install -g n

n latest (安装最新的版本)

n stable(安装稳定版本)

(4).安装cnpm,因为npm官方镜像安装有时候会特别慢,这里可以推荐大家安装NPM淘宝镜像

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

安装成功后就可以使用cnpm来安装模块了

二:初始化项目

首先先安装vue脚手架,利用脚手架来新建一个项目

1.安装vue-cli

cnpm install vue-cli -g  //-g代表的是全局安装

查看是否安装成功 ---vue -V(V是大写的哦),这样就可以查看安装的vue-cli的版本

2.确实新建项目的位置,可以新建一个文件夹(例如:vue-learn),然后进入到对应的目录下

3.初始化项目

vue init webpack vue-demo(项目名称)

vue-router---------->是否安装路由,选择安装

eslint----------------->js和jsx语法静态检查工具,正常推荐安装一下,规范代码风格,养成一个良好的习惯

三:启动项目

项目初始化之后就是项目启动,正常新建之后,我们也可以看到初始化的提示步骤

1.切换到对应的项目目录中,(cd  文件名称)比如我们的项目名称是vue-demo 那就是cd vue-demo切换到对应的文件下

2.npm run dev(启动项目)项目启动之后,正常我们一般在项目中会应用一些依赖包--- 执行npm

如上图:项目启动成功!

初学vue的同学可以试一试,简单便捷的学习之路就开始啦.