登录/注册

web前端

位置导航: web前端>

vue环境搭建



1.1  

 

 

Vue  是一套用于构建用户界面的渐进式JavaScript框架。目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。能完美地驱动复杂的单页应用。

2
安装Node.js

2.1 官网

官网地址:https://cn.vuejs.org/ 

 

2.2 安装Node.js

安装NodeJShttps://nodejs.org/en/直接安装LTS版本即可

 

 

3 安装Vue脚手架

3.1 查看NPM版本

npm 全称为 Node Package Manager,是一个基于Node.js的包管理器,也是整个Node.js社区最流行的第三方模块最多的包管理器。

打开CMD命令行,输入以下内容:

npm -v

 

     

3.2 安装 cnpm

解决外国仓库速度慢,由于网络原因换成阿里镜像

 

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

3.3 全局安装Vue脚手架vue-cli

全局安装后文件下载到操作系统默认的全局文件夹里,每个项目都能用。局部安装后文件下载到项目文件夹里,只对当前项目生效

 

安装vue/cli

cnpm install -g @vue/cli

 

确认安装成功,执行查看命令

//查看版本

vue version

//查看所有npm已安装包

npm list -g --depth 0查看

 

安装cli-service-global

cnpm install -g @vue/cli-service-global

 

 

3.4 Vue管理界面

启动管理界面,可以通过UI界面进行项目创建,插件配置,调试与发布

vue ui

 

 


4 Router路由简介

4.1 引入模块的2种方式

 

 

 

4.2 跳转新模块(App.vue是默认入口不要配置到路由里)

 

 

5 命令行初始化Vue项目及预设说明

1.cd到需要创建项目的文件夹。创建一个新的项目:vue create new-test3

红色框起来的部分就是我之前创建项目时保存的预设,括号中是这个预设中包含的插件,移动上下键可以选择一个预设安装,如果不需要或者自己配置,选择最后一项,按回车

2.选择需要安装的插件,移动上线键,按空格键切换选中之后保存,这里我选择babelroutervuexcss pre-processors这四个插件,按回车到下一步

3.是否按照history的方式创建路由,我选择否,回车下一步

4.选择css预编译工具,我选择less,回车下一步

5.这些组件的配置文件是放在一个package.json中还是分开放,我选第一项分开放,回车下一步

6.重点来了,重点来了,重点来了,重要的事情说三遍!

 

这里会问你是否需要保存预设并用到以后的项目中,我选择yes,回车下一步

7.问你保存的preset的名字是什么,我设为testPreset,回车下一步直到安装完成。

 

在你设置保存预设的时候系统会自动生成一个.vuerc的文件,一般在c盘,可以在c盘全局搜索并找到这个文件,用编辑器打开可以看到之前做的预设配置

那么再创建新项目的时候会出现上次预设的插件配置,这样就省去了再次一个一个添加插件的烦恼,如下图:

红框部分为上一次预设的配置,选中回车就可以创建和test3同样配置的项目文件。当然,你也可以对.vuerc文件中这些配置进行修改,删除。修改之后的预设会再下一次新建项目的时候生效。可以拷贝这个文件到别的电脑,这样在新建项目的时候也会使用同样的预设。

 

 

 


上一篇:select回显

下一篇:没有了