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了

Logo

前往低代码交流专区

更多推荐