默谷资源网

专业网站建设资源库

安装Vue.js,搭建Vue环境

一、Vue 开发环境:

Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言

npm::Nodejs下的包管理器

webpack: Vue的模板文件。把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。

vue-cli::用户生成Vue的脚手架。

二、Vue 环境搭建:

1.安装node.js:

从node.js官网下载并安装node,安装过程很简单,一直默认。

npm 版本需要大于3.0,如果低于此版本需要升级它。

查看版本:

node -v

npm -v

升级 npm:

npm install npm -g

2.使用淘宝NPM镜像:

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

完成后可以用cnpm代替npm来安装依赖包

如果安装失败,可以npm cache clean清理缓存,重新安装。

三、Vue 安装vue-cli脚手架构建工具

cnpm install --global vue-cli

判断是否安装成功:

vue -V

卸载vue-cli脚手架

cnpm uninstall --global vue-cli

四、Vue 使用vue-cli构建项目

vue init webpack my-project

my-project是项目名称,接下来会进行一些设置。

参考:

arget directory exists. Continue? (Y/n) 直接回车默认(然后会下载模板,这里可能需要连代理)

Project name (vue-test) 直接回车默认

Project description (A Vue.js project) 直接回车默认

Author 直接回车默认

Install vue-router? 直接回车默认(安装路由)

Use ESLint to lint your code? No(严格代码检测)

pick an eslint preset. 默认Standard

set up unit tests with karma + mocha?No(单元测试不需要)

set up e2e tests with Nightwatch?No(单元测试不需要)

五、Vue 安装依赖

进入项目目录:

cd my-project

安装依赖:

cnpm install 或 npm install

项目结构里,多了一个node_modules文件夹

六、Vue 是否搭建成功

启动编译项目:npm run dev

在浏览里输入:localhost:8080(默认端口为8080)

七、Vue 发布项目

npm run build

八、安装Vue组件

一、AJAX(axios)安装

npm install axios --save

二、AJAX参数转换(qs)安装

npm install qs --save

三、Vuex 安装:

npm install vuex --save

四、前端框架(vue-beauty)安装

npm install vue-beauty --save

五、前端手机框架(Mint UI)安装

npm install mint-ui --save

六、前端框架(Element UI)安装

npm install element-ui --save

七、前端框架(Ant-design-vue)安装

npm install ant-design-vue --save

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言