VUE笔记 -- Vue安装及其elementUI组件引用安装

Vue 一个渐进式的JavaScript 框架
中文官网:https://cn.vuejs.org/
GITHUB:https://github.com/vuejs/vue
一个新时代的javascript的框架 拓展性强 易用 上手快
个人认为它适合前后端REST的项目 当然MVC也适用

很早之前朋友就拉我学Vue,中间断断续续的看文档,学了一些
emmm 其实还是和学jq php的时候一样。。基本就瞎看看
现在觉得机会成熟了,就开始打算实战写一个个人网页。。
这里我不会讲一些Vue的具体原理,但是你能通过此教程在你的windows电脑上安装vue 并且成功npm run dev
包括引入饿了么UI组件库

首先,你的windows上需要安装npm我们需要下载安装node.js http://nodejs.cn/
下载安装后,打开CMD 输入npm -v 查看版本 如果正常安装成功会显示当前npm的版本号
当然你也可以直接开始安装vue 但是我并不推荐。。因为太卡了
我们可以安装cnmp(淘宝的镜像源)
CMD中输入 cnpm install npm -g 耐心等待即可

接下来是VUE官方的教程
这里我推荐使用Vue 提供的一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置,默认回车即可
This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

接下来cd my-project 进入你的项目目录(或者是cd 你刚刚在上面命名的projectname)
然后就是进入目录后 安装依赖 同上 如果你安装了cnpm就用 cnpm install 如果没有就用 npm install
最后 只需要 npm run dev 或者 cnpm run dev 静候一段时间 即会提示你打开 http://localhost:8080
至此,Vue全局安装成功了

你可以使用编辑器打开你项目内的src/App.vue进行修改,详细的vue教程请参考官方资料
接下来是引入elementUI组件
首先 同上 你可以 cnpm install element-ui 或者 npm install element-ui 安装它
然后 你需要在你的项目中import 在src/main.js进行添加

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

至此 你就可以在App.vue中进行使用vue组件

vue

最后修改:2020 年 04 月 21 日 02 : 51 PM
如果觉得我的文章对你有用,请随意赞赏