vue新建一个项目

vue新建一个项目

---

---

前言

Vue](https://cn.vuejs.org/) 是一套用于构建用户界面的渐进式框 架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
接下来就让我们来看下怎么创建一个Vue项目

---

一、Vue新建一个项目

1、安装node.js

首先到node.js官网下载一个node.js最新稳定版本

然后双击就可以安装

然后直接下一步的傻瓜式安装，直到Finish完成安装。
windows+r 打开控制命令行程序输入（cmd）回车,检查是否安装成功


输入node -v检查node.js版本，node.js自带npm版本
输入npm -v检查npm版本
输入npm install -g npm 跟新npm最新版本
使用淘宝镜像
国内直接使用使用npm的官方镜像是非常慢的，所以推荐使用淘宝npm镜像
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

大家都知道国内直接使用npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。

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

这样就可以使用cnpm 命令来安装模块了：

2、项目初始化

第一步先安装vue-cli
cnpm install vue-cli -g          //全局安装 vue-cli
（3.0  下载安装  npm  install  -g  vue  @cli）
 查看是否安装成功 vue list 
 （3.0删除了vue list）

3、新建项目

创建个vue项目，命令行操作指令：vue init webpack myproject,
myproject是你创建的文件夹名。
（3.0 vue Create project 项目的名称）
项目安装完成，cnpm install 下载依赖

npm run dev就可以打开项目了。
(3.0 启动项目 npm run serve)

复制地址到浏览器就可以开到新创建的项目了

初始化文件结构

二、引入elemelt

如果是需要使用elemelt.ui开发的话，则需要引入element

1、安装element-ui框架

cnpm i element-ui -S

2、在项目中使用element-ui

在main.js中引入element组件

/*引入如下组件*/
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

修改后完整的main.js的代码为

// The Vue build version to load with the `import` command
//
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
/*引入element组件*/
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
 
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

如此就能使用elelent.ui了