Vue.js入门 - Go语言中文社区

Vue.js入门


1、安装node.js

官网:http://nodejs.cn/download/  下载相应的版本,并安装,目录如下

把Node添加到系统环境变量里面,打开cmd命令行,输入npm -v,如果出现如下图的显示,说明已经安装正确。

如果你安装的是旧版本的 npm,可以通过 npm 命令进行升级。

2、安装webpack

安装好 npm 之后,就可以通过 npm 命令来下载各种工具了。

安装打包工具 webpack,-g 表示全局安装。

npm install webpack -g

3、安装vue-cli

安装 vue 脚手架项目初始化工具 vue-cli,-g 表示全局安装。

npm install vue-cli -g

4、淘宝镜像(看情况)

因为 npm 使用的是国外中央仓库,有时候下载速度比较“喜人”,就像 Maven 有国内镜像一样,npm 在国内也有镜像可用。这里建议使用淘宝镜像。

安装淘宝镜像,安装成功后 用 cnpm 替代 npm 命令即可,如: cnpm install webpack -g 。

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

5、创建项目

vue init webpack my-project  -->输入以上命令之后,安照提示,输入相应的内容即可。

$ vue init webpack kitty   -- 这个是那个安装vue脚手架的命令
This will install Vue 2.x version of the template.   --这里说明将要创建一个vue 2.x版本的项目
For Vue 1.x use: vue init webpack#1.0 kitty
? Project name (kitty)   --项目名称
? Project name kitty
? Project description (kitty project)   --项目描述
? Project description kitty project
? Author Louis   -- 项目创建者
? Author Louis
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n)   -- 是否安装Vue路由,也就是以后是spa(但页面应用需要的模块)
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n   --是否启用eslint检测规则,这里个人建议选no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "kitty".
To get started:   -- 这里说明如何启动这个服务
cd kitty
npm install
npm run dev

目录结构如下:


6、安装依赖:npm install

7、启动服务:npm run dev

8、编译打包

开发完成后,通过以下命令就可把整个项目打包,生成到 dist 目录下,直接拷贝到服务器即可。

npm run build

---------------------

VUE项目引入axios:

下载:$ npm install axios --save

引入:import axios from ‘axios’
           Vue.prototype.$axios = axios

 

VUE项目引入element-ui:

下载:npm install element-ui --save 或者 npm i element-ui -S

引入:import elementUI from 'element-ui'

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

  2.   Vue.use(elementUI)

 

 

 

 

版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/qazxsw635241/article/details/103084027
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2020-03-01 22:17:21
  • 阅读 ( 817 )
  • 分类:前端

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢