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

第一种方式：

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是否安装成功

3.项目安装和创建
（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退出运行

4. 配置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中打包了。

5.安装使用stylus（是一种健壮的css）
cnpm install --save-dev stylus stylus-loader