express

1. 安装

npm install express --save

2. 创建项目

vue js

安装Vuejs

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。这篇文章将会从实操的角度,介绍整个搭建的过程。

1. 避坑前言

其实这次使用vue-cli的过程并不顺利,反复尝试几次都遇到以下这个报错:

 
创建vue-cli工程项目时的报错

在网上查了很多资料才发现原来是node版本过低的问题,虽然没有找到官方对这个“过低”问题的解释,但是根据国外网友的经验之谈,应该是至少使用node6,我将node4更新至node8之后确实没有报错了,顺利搭建。相关答疑帖:https://github.com/vuejs/vue-cli/issues/618

 
确认node与npm的版本

将这个放在最前面说是希望大家在搭建前,应该先确保将node更新至6以上,这样能少走一些弯路。下面开始正式介绍整个构建过程。

2. 使用 vue-cli 搭建项目

下面整个过程是基于已经安装node.js和cnpm的基础上,node.js如何安装就不在这里详说了。如何全局化安装cnpm,这里简单提一下:

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

其实对于安装vue-cli,使用npm命令和cnpm命令都是可以的,个人觉得使用npm安装的比较慢,而且很可能会因为网络问题而出错,所以还是觉得使用cnpm稳一点。

(1)全局安装 vue-cli ,在命令提示窗口执行:
cnpm install -g vue-cli
 
安装vue-cli

出现以上提示表示vue-cli正常安装成功,可以正式创建vue-cli工程项目了。

(2)安装vue-cli成功后,通过cd命令进入你想放置项目的文件夹,在命令提示窗口执行创建vue-cli工程项目的命令:
vue init webpack
 
创建vue-cli工程项目

确认创建项目后,后续还需输入一下项目名称、项目描述、作者、打包方式、是否使用ESLint规范代码等等,详见上图。安装顺利执行后会,生成如下文件目录:

 
生成文件目录
(3)生成文件目录后,使用 cnpm 安装依赖:
 cnpm install
 
安装依赖
(4)最后需要执行命令: npm run dev 来启动项目,启动完成后会自动弹出默认网页:
 
启动项目
 
启动项目
 
默认网页

到这一步,就算成功利用vue-cli搭建一个vue项目了,撒花 ~

3.目录结构及其对应作用

通过vue-cli搭建一个vue项目,会自动生成一系列文件,而这些文件具体是怎样的结构、文件对应起什么作用,可以看看下面的解释:

├── build/                      # webpack 编译任务配置文件: 开发环境与生产环境
│ └── ...
├── config/
│ ├── index.js # 项目核心配置
│ └── ...
├ ── node_module/ #项目中安装的依赖模块
── src/
│ ├── main.js # 程序入口文件
│ ├── App.vue # 程序入口vue组件
│ ├── components/ # 组件
│ │ └── ...
│ └── assets/ # 资源文件夹,一般放一些静态资源文件
│ └── ...
├── static/ # 纯静态资源 (直接拷贝到dist/static/里面)
├── test/
│ └── unit/ # 单元测试
│ │ ├── specs/ # 测试规范
│ │ ├── index.js # 测试入口文件
│ │ └── karma.conf.js # 测试运行配置文件
│ └── e2e/ # 端到端测试
│ │ ├── specs/ # 测试规范
│ │ ├── custom-assertions/ # 端到端测试自定义断言
│ │ ├── runner.js # 运行测试的脚本
│ │ └── nightwatch.conf.js # 运行测试的配置文件
├── .babelrc # babel 配置文件
├── .editorconfig # 编辑配置文件
├── .gitignore # 用来过滤一些版本控制的文件,比如node_modules文件夹
├── index.html # index.html 入口模板文件
└── package.json # 项目文件,记载着一些命令和依赖还有简要的项目描述信息
└── README.md #介绍自己这个项目的,可参照github上star多的项目。
build/

weiUI
基本上是 weui 的 css 样式:
npm install weui -save
 
weui 配套的 js 代码:
npm install weui.js -save
 
在要用的 vue 文件里加上:

import 'weui'
import weui from 'weui.js'
// 引入weui.js weui样式
Vue.prototype.$weui = weui
 

3. express 框架使用 vue框架 weiUI的更多相关文章

  1. DRF框架和Vue框架阅读目录

    Vue框架目录 (一)Vue框架(一)——Vue导读.Vue实例(挂载点el.数据data.过滤器filters).Vue指令(文本指令v-text.事件指令v-on.属性指令v-bind.表单指令v ...

  2. 27.用webpack自搭react和vue框架

    自己搭建react-app vue-cli 前置条件 cnpm i -D webpack webpack-cli webpack-dev-server cnpm i -D css-loader sty ...

  3. Vue框架Element的事件传递broadcast和dispatch方法分析

    前言 最近在学习饿了么的Vue前端框架Element,发现其源码中大量使用了$broadcast和$dispatch方法,而Element使用的是Vue2.0版本,众所周知在Vue 1.0升级到2.0 ...

  4. 一款简单而不失强大的前端框架——【Vue.js的详细入门教程①】

    ↓— Vue.js框架魅力 —↓ 前言       Vue.js 是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.V ...

  5. 关于vue 框架与后台框架的混合使用的尝试

    这几天我在研究前台框架和后台框架融合的问题,进行了一些尝试; 我前台选择的是 vue,当然也可以选择 react 等其他 mvvm 框架,不过 vue 对于我来说是最熟悉的; 后台话,我选择的是 ph ...

  6. 关于vue 框架与后台框架的混合使用的尝试------转载

    这几天我在研究前台框架和后台框架融合的问题,进行了一些尝试; 我前台选择的是 vue,当然也可以选择 react 等其他 mvvm 框架,不过 vue 对于我来说是最熟悉的; 后台话,我选择的是 ph ...

  7. 使用vue框架运行npm run dev 时报错解决

    使用使用vue框架运行npm run dev 时报错 如下: 原因: localhost:8080 有可能其他软件占用了,导致其他问题的出现 我们可以动态修改地址 解决: 进入项目文件的config文 ...

  8. Vue框架下的node.js安装教程

    Vue框架下的node.js安装教程 python服务器.php  ->aphche.java ->tomcat.   iis -->它是一个可以运行JAVASCRIPTR 的运行环 ...

  9. Vue框架axios请求(类似于ajax请求)

    Vue框架axios get请求(类似于ajax请求) 首先介绍下,这个axios请求最明显的地方,通过这个请求进行提交的时候页面不会刷新 <!DOCTYPE html> <html ...

随机推荐

  1. zabbix网络发现主机

    1 功能介绍 默认情况下,当我在主机上安装agent,然后要在server上手动添加主机并连接到模板,加入一个主机组. 如果有很多主机,并且经常变动,手动操作就很麻烦. 网络发现就是主机上安装了age ...

  2. Graph HDU - 4467

    https://vjudge.net/problem/HDU-4467 大概就是,设一个块大小T 对于度数<=T的点,设为1类点,在改变颜色的时候暴力查询与其相邻点,更新答案 对于度数>T ...

  3. P2676 超级书架

    题目描述 Farmer John最近为奶牛们的图书馆添置了一个巨大的书架,尽管它是如此的大,但它还是几乎瞬间就被各种各样的书塞满了.现在,只有书架的顶上还留有一点空间. 所有N(1 <= N & ...

  4. 前端之HTML语法及常用标签

    html语法: 1.常规标记: <标记 属性=“属性值” 属性=“属性值”></标记>: 2.空标记: <标记 属性=“属性值” 属性=“属性值”/> 注意事项: ...

  5. css实现行内文字垂直居中

    之前本人一直使用浮动.相对定位.绝对定位和display:table等css的方法进行定位.网上得知flex可实现弹性布局,符合未来发展趋势,随尝试. 1:让盒子行内文字垂直居中,解决思路是讲文字的行 ...

  6. 安卓&IOS 手机添加O365 邮箱账户

    手机添加O365 邮件账户 一.Android手机添加O365邮件账户 1. 找到手机上“电子邮件” 2. 打开设置 3. 点击添加账户 4. 选择“Exchange” 5. 输入O365的邮箱账户和 ...

  7. Linux Mini 安装 VMware Tools

    1.挂载VMware Tools光盘 mount -t iso9660 /dev/cdrom /opt/ 2.安装依赖,安装Tools 将文件复制至 tmp目录解压VMwareTools-10.0.6 ...

  8. 图解在Ubuntu16.04中安装MySQL

    1.安装mysql-server sudo apt-get install mysql-server 输入y,回车.等待下载,安装 出现下图,需要设定Mysql的密码. 输入密码,回车,弹出确认对话框 ...

  9. css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style

    css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style .con1{ width: 100p ...

  10. CAD交互绘制矩形框(网页版)

    主要用到函数说明: _DMxDrawX::DrawLine 绘制一个直线.详细说明如下: 参数 说明 DOUBLE dX1 直线的开始点x坐标 DOUBLE dY1 直线的开始点y坐标 DOUBLE ...