新手学习VUE——环境搭建及创建项目

原创 2018年04月15日 20:02:56

第一种方式:

1.     下载安装node.js

    检查是否成功:node-v或npm-v

2..搭建项目:

    第一种方法:用iview脚手架建项目

        打开iview官网==>生态 ===>iview cli==>进行下载iview脚手架,

    下载后进行创建项目

    第二种方法:命令行进行创建

        (1).npm install -gvue-cli                       //全局安装vue-cli

        (2).npm install -g webpack                          //全局安装webpack

        (3).(npm)npm install -gwebpack-dev-server             //安装webpack的本地webserver

        (4).npm install --save iview                     //下载iveiw组件库

        (5).npm install axios    npminstall --save vue-axios  //下载axios

        (6).cnpm install element-ui --save

        (7).vue initwebpack  项目名      //搭建项目(你想把项目发到那,就切换到那块下载)

         

3.切换到你所在的项目,运行项目npm run dev

4.编辑项目时,我建议用HBuilder

5.下载好后,项目如下图所示:

 

6.比较关心的的几个文件:

    src下的assets:存放静态文件

    src下的components:写页面

    src下的router下的index.js:配置路由

    src下的main.js:前端的主入口,主要是写配置。

    对于新引进来的东西,需要在index.js和main.js下引用才方可使用。

如果觉得npm速度不快,可下载cnpm

(npm install -g cnpm-registry=http://registry.npm.taobao.org)


第二种方式:

1.检测是否安装好nodejs和npm

检测命令

    node -v

    npm -v

如果没有安装需要先安装

nodejs的下载路径:https://nodejs.org/en/download/

在Windows上安装时务必选择全部组件,包括勾选Add toPath。

安装完成后,在Windows环境下,请打开命令提示符,

idea cmd窗口

然后输入node -v,如果安装正常,你应该看到  版本号输出:

检查nodejs是否安装成功

npm是Node.js的包管理工具(package manager),Nodejs的安装程序默认安装npm,在命令提示符或者终端输入npm -v,可以看到类似以下的输出:

检查npm

在cmd中直接使用npm来安装的一些工具的话会比较慢,所以我们使用淘宝的npm镜像: 

输入npm i -g cnpm --registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了,如果权限不够,请使用管理员运行命令提示符

安装淘宝npm镜像

2.安装vue-cli,vue脚手架

使用如下命令

    cnpm i -g vue-cli

安装vue-cli

    测试是否安装成功:vue -V

检查vue是否安装成功

2.项目安装和创建

(1).安装项目

首先进入工作目录(如果不在工作目录),使用cd 命令

进入工作目录

使用脚手架安装项目:

vue init webpack first_vue 

控制台显示:

提示目录已存在,是否继续:Y

Project name(工程名):回车

Project description(工程介绍):回车

Author:作者名

Vue build(是否安装编译器):回车

Install vue-router(是否安装Vue路由):回车

Use ESLint to lint your code(是否使用ESLint检查代码,我们使用idea即可):n

Set up unit tests(安装测试工具):n

Setup e2e tests with Nightwatch(测试相关):n

Should we run `npm install` for you after the project hasbeen created? (recommended):选择:No, I will handle thatmyself

(2).初始化项目

进入项目目录

    cd firstVue

初始化项目

    cnpm i

项目目录结构

运行项目

    cnpm run dev

浏览器打开:localhost:8080,即可打开vue项目

Ctrl+C退出运行

3. 配置idea

File - Settings - Languages&Frameworks - JavaScript:修改JavaScript language version为ECMAScript 6,确认

File - Settings - Plugins:搜索vue,安装Vue.js

Run - Edit Configurations...:点击加号,选择npm,Name为Run,package.json选择你工程中的package.json,Command为run,Scripts为dev,然后就可以直接在idea中运行了

继续点击加号,选择npm,Name为Build,package.json选择你工程中的package.json,Command为run,Scripts为build,然后就可以直接在idea中打包了。

4 .安装使用stylus(是一种健壮的css)

cnpm install --save-dev stylus stylus-loader

安装vue-cli脚手架提示Error: spawn npm ENOENT的解决方式

按照官方的文档安装vue-cli过程中出现了莫名其妙的报错: 查阅了很多文档都无法解决,于是自己后面慢慢尝试了一下,认真一步一步观察安装的提示,直到看到最后一句提示:  Should we run ...
  • jtrllpqq
  • jtrllpqq
  • 2017-12-13 14:24:06
  • 1192

Vue2+VueRouter2+webpack 构建项目实战(一)准备工作

Vue2+VueRouter2+webpack 构建项目实战(一)准备工作之前写的博客没有采用打包工具,而是直接引用js的方式来做的。这种方式很扯淡,也因此,我写了三篇博客之后就没有再写了。通过几个月...
  • FungLeo
  • FungLeo
  • 2016-11-15 14:43:06
  • 51354

Vue小模块之用户登录功能(一)工程创建和路由配置

Vue小模块之用户登录功能(一)搭建基础环境 技术栈 Vue全家桶: 前端框架 Vue.js 状态管理 Vuex 动态路由匹配 vue-router http服务 axios 模块打包 ...
  • sps900608
  • sps900608
  • 2018-03-08 22:12:16
  • 345

搭建vue.js

下载node.js官网下载或者链接:https://pan.baidu.com/s/1_pNhp_QTOPl3cprgwTvqyg 密码:iv7d下载后打开,默认安装打开cmd,查看npm版本npm ...
  • Code_Pupil
  • Code_Pupil
  • 2018-04-09 22:52:25
  • 14

Vue-cli 初级介绍

初级Vue使用者可以看看
  • wxj_ios
  • wxj_ios
  • 2017-12-24 19:14:03
  • 766

Vue建立新工程

Vue项目创建需要安装开发环境:vue、node、webpack、vue脚手架1.安装node上Node.js官网中下载安装,网址:http://nodejs.org/en/2.安装Vuenpm in...
  • qq_39200924
  • qq_39200924
  • 2018-03-29 14:12:05
  • 17

揭秘组件库一二事(上)

一、前言 1、灵感来源 我平常比较喜欢对一些东西做一些记录和总结,其中包括一些组件,积累的量比较多的时候,发现零散的堆积已经不太适合进行管理了。 于是我开始思考,有什么好的办法可以比较规范地来管...
  • github_36369819
  • github_36369819
  • 2018-03-19 00:15:35
  • 101

Vue.js脚手架安装

1.首先下载安装node.js 下载地址:https://nodejs.org/en/ 2.运行cmd,查看版本号(出现版本号说明安装成功) 输入:node -v 查看node版本号(需要在...
  • frank_fong
  • frank_fong
  • 2018-01-23 13:35:49
  • 325

nodeJs + webpack+vue+ element ui 环境安装

一.安装nodeJs1.打开NodeJs官网:https://nodejs.org/en/download/  点击下载2.双击安装,安装过程基本直接“NEXT”就可以了。(windows的安装msi...
  • gao_xu_520
  • gao_xu_520
  • 2018-03-22 13:04:32
  • 113

基于vue-cli、elementUI的Vue超简单入门小例子

- 这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子。 - 开始写例子之前,先对环境的部署做点简单的介绍,其实和Vue官方的差不多。 #如若没...
  • csdnear
  • csdnear
  • 2018-03-03 23:14:16
  • 291
收藏助手
不良信息举报
您举报文章:新手学习VUE——环境搭建及创建项目
举报原因:
原因补充:

(最多只允许输入30个字)