vue环境搭建

lz的第一个vue项目，随便看了一下vue的技术文档，就开始着手开发了，郁闷。。。。。。。。。。。。。。。。。

第一步 下载node.js并安装。下载地址：https://nodejs.org/en/download/。 下载.msi 格式的直接连续下一步就可以了。安装完成后可以用 node  -v  和 npm -v 查看版本号。

第二步  下载 vue-cli . 在命令行中输入npm install -g vue-cli，自动下载vue-cli（会生成一大堆的依赖文件）。可输入 vue 查看是否安装成功

第三步  初始化项目并下载webpack。执行命令 vue init webpack 项目名  初始化项目

1） project name 项目名称  点回车

2）project description 项目描述， 不想写直接回车

3）author  作者

4）install vue-router?  建议安装  Y  回车

5）use ESLint preset      eslint算是一个代码语法规范检查的工具。 这个可根据自身是否熟悉安装

6）后面两个 直接N

第四步 cd project

第五步 npm install

第六步 npm run dev 启动

第七步npm run build 打包

第八步安装element插件npm i element-ui -S

引用element

引入 Element

你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。

¶完整引入

在 main.js 中写入以下内容：

import Vue from 'vue'

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

import App from './App.vue';

 

Vue.use(ElementUI);

 

new Vue({

  el: '#app',

  render: h => h(App)

});

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

 

 

下载vue的IDE Visual Studio Code地址：

https://code.visualstudio.com/