vue的安装及元素组件的安装方法 - 行业资讯 - 肥雀云

1,首先需要下载nodejs,安装后打开命令窗口可以使用npm包管理工具

npm集成在节点中的,所以直接输入npm-v查看npm的版本信息

2, npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像——-cnpm。

3,在命令行中输入npm安装- g cnpm——注册表=http://registry.npm.taobao.org然后等待安装完成,就可以使用cnpm安装依赖包了,这里说一下最好用npm安装,cnpm有时依赖下载不全,如果npm下载缓慢可以尝试cnpm安装依赖包。

4,安装vue-cli脚手架构建工具。在命令行中运行命令npm安装- g vue-cli,然后等待安装完成。

5,用vue-cli构建项目。选定目录,存放新建的项目

6,在桌面目录下,在命令行中运行命令vue init webpack firstVue。解释一下这个命令,这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称。

7,运行初始化命令的时候回让用户输入几个基本的选项,如项目名称,描述,作者等信息,如果不想填直接回车默认就好。

8,打开firstVue文件夹,项目文件如下所示。

9日安装依赖包(记住一定要在新建的项目文件夹目录下),通过npm安装命令

10,安装好依赖后,运行项目,通过npm运行dev实现,一般默认是8080端口,打开浏览器输入localhost: 8080

　　8080年

11日端口如果被占用了,需要修改一下配置文件配置/index.js

更改端口后显示这样:

<强> 1,在当前目录下,运行:npm我element-ui - s

<强> 2,在src/main.js中添加代码(红色的)

　　　　//加载Vue构建版本的“进口”命令//(运行时只或独立)被设置在webpack.base。配置一个别名。　　从“Vue”进口Vue 　　导入应用程序从“/App。” 　　从“进口路由器。/路由器的　　从“element-ui”//进口ElementUI手动变红　　导入“. ./node_modules/element-ui/lib/theme-chalk/索引。css的//手动变红//具体路径有的不同,vue运行报错请看第五点　　Vue.config。productionTip=false/* eslint-disable没有新*/Vue.use (ElementUI)//手动变红　　新Vue ({ 　　埃尔:“#应用”, 　　路由器, 　　模板:& lt; App/祝辞, 　　组件:{应用} 　　}) 　　之前　　　　

<强> 3,然后在.vue文件里就直接可以用了,如:在src/组件/Hello.vue做一下修改

　　　　　　& lt; template> 　　& lt; div类=癶ello”比; 　　& lt; h2>{{味精}}& lt;/h2> 　　& lt; h3>基本Links 　　& lt; el-button>默认按钮& lt;/el-button> 　　& lt; el-button类型=爸鳌痹谥饕磁? lt;/el-button> 　　& lt; el-button类型=拔谋尽痹谖淖职磁? lt;/el-button> 　　& lt;/div> 　　& lt;/template> 　　　　& lt; script> 　　出口默认{ 　　名称:“你好”, 　　数据(){ 　　返回{ 　　味精:“欢迎来到你的Vue。js应用” 　　} 　　} 　　} 　　& lt;/script> 　　　　& lt; !——“作用域”属性限制CSS添加到该组件alt=" vue的安装及元素组件的安装方法">

5,上述(3)有时会报错,一是查看element-ui的index.css路径是否正确,第二因为报错会显示找不到文件,需要在构建/webpack.base.conf.js文件中添加一段代码,如下。