【VUE】VUE环境+项目搭建详解

一、环境搭建:

1、安装nodejs:

 步骤:在node官网(https://nodejs.org/en/download/ )选择跟自己的电脑匹配的版本进行下载,然后一步步的安装即可,在cmd控制台输入 node -v ,如果出现版本信息即表示安装成功。

2、查看npm包管理器,为了提高效率,安装淘宝镜像安装相关依赖。

1> npm包管理器是集成在node中的,所以直接输入 npm -v 就能查看到版本信息,若出现版本信息则表示npm能正常使用。

2> 输入 npm install -g cnpm --registry=http://registry.npm.taobao.org  ,安装淘宝镜像安装相关依赖。以后再用到npm的地方直接用cnpm来代替就好了

3>检查是否安装成功:cnpm -v

3、安装Vue脚手架vue-cli

1> 执行命令安装:cnpm install vue-cli -g //全局安装 vue-cli

2、检查脚手架安装情况:

vue list

 

 

二、项目搭建

1、进入你的项目目录,创建一个基于 webpack 模板的新项目:

 vue init webpack vue-demo

说明:
Vue build ==> 打包方式,回车即可;

Install vue-router ==> 是否要安装 vue-router,项目中肯定要使用到 所以Y 回车;

Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车;

Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车;

Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车;
至此模板项目创建成功

2、项目运行:

在控制台,进入项目目录,然后再浏览器输入:http://localhost:8080/,出现“Welcome to Your Vue.js App”,启动成功。
cd vue-demo  

npm run dev

 

 

 

 

 

 

 

发布了34 篇原创文章 · 获赞 19 · 访问量 3万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章